How to use/expose vivus.js methods in react

Question

I'm using react component for vivus.js library, but don't know how to use its Methods, eg I would like to call myVivus.play() on slide change, but not sure how. I'm just learning react, as I understand I need to expose component's methods to use it in render, but so far all my attempts were unsuccessful. Any help is much appreciated! Thank you.

import React from 'react';
import ReactVivus from 'react-vivus';
import ReactFullpage from '@fullpage/react-fullpage'
import Svg1 from './example.svg';
import Svg2 from './example2.svg';


const Anim1 = () => (
  <ReactVivus
    id="anim1"
    option={{
      file: Svg1,
      animTimingFunction: 'EASE',
      type: 'oneByOne',
      onReady: console.log
    }}
    callback={console.log}
  />
);

const Anim2 = () => (
  <ReactVivus
    id="anim1"
    option={{
      file: Svg2,
      animTimingFunction: 'EASE',
      type: 'oneByOne',
      onReady: console.log
    }}
    callback={console.log}
  />
);


const FullpageWrapper = fullpageProps => (
  <div>
  <SEO title="Home" />
  <Menu>
    <MenuContainer>Logo</MenuContainer>
  </Menu>
  <ReactFullpage
    {...fullpageProps}

    //fullpage options
    licenseKey = {'***'}
    navigation
    anchors={['intro', 'reasonOne', 'reasonTwo']}
    sectionsColor={['#4e5c9e', '#d3d7f2', '#F5F5F6']}

    render={({ state, fullpageApi }) => {


      return (
        <div id="fullpage-wrapper">
          <div className="section section1 light">
            <SlideWrapper>
              <TextBlock>
                <SlideHeader>Header 1</SlideHeader>
                <SlideDescription>Description text 1</SlideDescription>
              </TextBlock>

              <AnimationBlock>
                <Anim1/>
                <button onClick={() => this.play()} >Play</button>
              </AnimationBlock>
            </SlideWrapper>
          </div>

          <div className="section section2">
            <SlideWrapper>

              <AnimationBlock>
               <Anim2/>
              </AnimationBlock>

              <TextBlock>
                <SlideHeader>Header 2</SlideHeader>
                <SlideDescription>>Description text 2</SlideDescription>
              </TextBlock>

            </SlideWrapper>
          </div>

          ...


        </div>

      );
    }}
  />

  </div>

);


export default FullpageWrapper;

Answer 1

Ok, so the thing is that react-vivus is a small wrapper arround vivus.js, but is not really complete. The creator of the library didn't let any way to call the methods from vivus.js such as play that you want to call. He let himself an issue about this here by the way.

That said, what you want can be done with a bit of tricky code, like this :

import React, {useState} from 'react';
import ReactVivus from 'react-vivus';
import svg from './example.svg';

const MyVivus = () => (
  <ReactVivus
    id="foo"
    option={{
      file: svg,
      animTimingFunction: 'EASE',
      type: 'oneByOne',
      onReady: console.log
    }}
    style={{ height: '100px', width: '100px' }}
    callback={console.log}
  />
);

function App() {
  const [show, setShow] = useState(true)

  const handleReset = () => {
    setShow(false) // unmounting here
    setInterval(() => setShow(true), 0) // re-mounting a fraction of second later
  } 

  return (
    <React.Fragment>
      {show ? <MyVivus/> : null}
      <button onClick={handleReset}>reset</button>
    </React.Fragment>
  );
}

What happens is that we remove the component and we put it back in very fast, so that the animation triggers again.

To integrate it in your code :

const FullpageWrapper = fullpageProps => {
  const [shown, setShown] = useState(true)

  const handlePlay = () => {
    setShown(false)
    setInterval(() => setShown(true), 0)
  }

  return (
    <div>
      <SEO title="Home" />
      <Menu>
        <MenuContainer>Logo</MenuContainer>
      </Menu>
      <ReactFullpage
        {...fullpageProps}
        licenseKey = {'***'}
        navigation
        anchors={['intro', 'reasonOne', 'reasonTwo']}
        sectionsColor={['#4e5c9e', '#d3d7f2', '#F5F5F6']}
        render={({ state, fullpageApi }) => (
          <div id="fullpage-wrapper">
            <div className="section section1 light">
              <SlideWrapper>
                <TextBlock>
                  <SlideHeader>Header 1</SlideHeader>
                  <SlideDescription>Description text 1</SlideDescription>
                </TextBlock>
                <AnimationBlock>
                  {shown ? <Anim1/> : null}
                  <button onClick={handlePlay}>Play</button>
                </AnimationBlock>
              </SlideWrapper>
            </div>
            <div className="section section2">
              <SlideWrapper>
                <AnimationBlock>
                  <Anim2/>
                </AnimationBlock>
                <TextBlock>
                <SlideHeader>Header 2</SlideHeader>
                <SlideDescription>>Description text 2</SlideDescription>
              </TextBlock>
            </SlideWrapper>
          </div>
        </div>
      )}
    />
  </div>
  )
}