react-vivus

    0.0.2 • Public • Published

    React Vivus

    NPM version

    NPM version

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

    This component makes use of vivus.js plugin.

    React Vivus Example Gif

    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 './example.svg';
     
    const MyComponent = () => (
      <ReactVivus
        id="foo"
        option={{
          file: svg,
          animTimingFunction: 'EASE',
          type: 'oneByOne',
          onReady: console.log
        }}
        style={{ height: '100px', width: '100px' }}
        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

    Install

    npm i react-vivus

    DownloadsWeekly Downloads

    333

    Version

    0.0.2

    License

    MIT

    Last publish

    Collaborators

    • qingguo