By including this component, you can create GIF preview like facebook. Lets see how to use this library.
GIF images consists of many frames, so size of GIF image is more as compared to normal image. Its not recommended to load GIF images first and its better to maintain one normal preview image for every GIF image. You can use first frame of GIF image as preview image. Click here to see my on-line tool for generating first frame of GIF image
Concept
Click here to read concept of GIF Preview
Using npm
npm install react-gif-preview --save
Import Tubular component and styles
import gifStyles from '../../node_modules/react-gif-preview/lib/react-gif-preview.css'; import GifPreview from 'react-gif-preview';
Usage
Here we have 2 properties src, gifSrc. Pass Preview image URL as src parameter and pass GIF image URL as gifSrc parameter.
<GifPreview src="...sample_first_frame.png" gifSrc="...sample_giphy.gif"/>
0 comments:
Post a Comment