How i play and pause React-gif image using ReactJS code

Question

Long time I am tring to react-gif animate with play and pause.Like facebook gif image exactly.

I am using react-gif npm module.But does not working.Please anyone review my code.

coding.......

import Markdown from 'react-markdown';
import Gif from 'react-gif';

const linkRenderer = (linkNode) => {
  return <a href={linkNode.href} title={linkNode.title} target="_blank" children={linkNode.children} />;
};


const imgixBase = 'https://chalees-min.imgix.net';
const imgixParameters = 'w=800&fit=max&auto=format,compress';
const imageRenderer = (imageNode) => {
  const imageSource = imageNode.src.startsWith('/')
    ? `${imgixBase}${imageNode.src}?${imgixParameters}`
    : imageNode.src;
  return <Gif src={imageSource} alt={imageNode.alt} title={imageNode.title} />
};

const MarkdownCustomized = (props) => (
  <Markdown 
    className={'markdown ' + (props.className || '')}
    source={props.source || ''}
    renderers={{
      'Link': linkRenderer,
      'Image': imageRenderer,
    }} />
);

export default MarkdownCustomized;

Answer 1

You can't control (play-pause) an animated gif. Gifs in facebook are disguised videos.

There are some workarounds here, providing some kind of limited control.

Answer 2

I don't see any logic that makes the Gif component play or pause in your code.

Looking at the Gif react component code, I see two ways of making the Gif play and pause.

1. Set the prop playing to false to pause, and true to play. E.g Set gif to play

<Gif src={imageSource} alt={imageNode.alt} title={imageNode.title} playing={true} />

2. The Gif component has methods play and pause that can be accessed by using refs. So, on the component that uses Gif component, you can have something like the following:

class Parent extends Component {
  handlePlayGif() {
    this.currentGif.play();
  }

  handlePauseGif() {
    this.currentGif.pause();
  }

  render() {
    return ( //... rest of code
       <Gif ref={(gif) => this.currentGif = gif} />

       // ... rest of jsx
       // onClick play gif
       <div onClick={() => handlePlayGif()}>play gif</div>
    );
  }
}