0.0.2 • Published 7 years ago
react-vivus v0.0.2
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 './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