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:

Blogroll

Follow this blog by Email

Popular Posts