React Vivus

This react component allows you to make drawing animation on SVG.

This component makes use of vivus.js plugin.

Installation

To install this component, run yarn add react-vivus or npm install react-vivus --save, Don't forget to install vivus by running yarn add vivus or npm install vivus --save.

Usage

To use the component, in your react application just do

import React from 'react';
import ReactVivus from 'react-vivus';
import svg from './hi.svg';

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

Click here to download the sample svg

You can view all the different options to create a custom animation to draw your SVG in whatever way you like here https://github.com/maxwellito/vivus#option-list