React JS SVG Library: Generate animated graphics in SVG using React JS

Recommend this page to a friend!
  Info   View files Documentation   View files View files (24)   DownloadInstall with Composer Download .zip   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not yet rated by the usersTotal: 25 All time: 531 This week: 5Up
Version License JavaScript version Categories
react-svg-components 1.0.1Custom (specified...5Animation, HTML, Graphics
Description Author

This package can be used to generate animated graphics in SVG using React JS.

It provides several classes to compose the animations of different types of basic graphic elements like arcs, lines and rectangles.

The composed animated graphics are outputted in SVG format.

Picture of Manolo Salsas
  Performance   Level  
Name: Manolo Salsas <contact>
Classes: 2 packages by
Country: Spain Spain
Age: 41
All time rank: 17912 in Spain Spain
Week rank: 6 Up2 in Spain Spain Up

Details

react-svg-components

Build Status npm version

SVG components built with [React][react].

Docs

Installation:

npm install react-svg-components

Usage:

import { Arc, Line, Rectangle } from 'react-svg-components';

Here's an example for each component:

<Arc radius={25} degreesOffset={15} degrees={270} strokeWidth={2} strokeColor={'#fff'} fillColor={'none'} strokeLinecap={'round'}/>

<Line lineLength={150} degrees={15} strokeWidth={5} strokeColor={'#fff'} strokeLinecap={'square'}/>

<Rectangle width={150} height={15} strokeWidth={5} strokeColor={'#fff'} fillColor={'#fff'}/>

Contributions

Yes please!

Development:

You can use react-storybook for developing components.

git clone https://github.com/msalsas/react-svg-components.git

cd react-svg-components

npm install

npm run storybook

Go to localhost:9001

To run tests:

npm run test

Deployment:

To build all components into dist directory run:

gulp build

[react]: http://facebook.github.io/react/

  Files folder image Files  
File Role Description
Files folder image.storybook (1 file)
Files folder imagedist (4 files)
Files folder imagesrc (4 files, 1 directory)
Files folder image__tests__ (3 files, 1 directory)
Accessible without login Plain text file .babelrc Data Auxiliary data
Accessible without login Plain text file .travis.yml Data Auxiliary data
Accessible without login Plain text file gulpfile.js Aux. Auxiliary script
Accessible without login Plain text file LICENSE Lic. License text
Accessible without login Plain text file package.json Data Auxiliary data
Accessible without login Plain text file README.md Doc. Documentation

  Files folder image Files  /  .storybook  
File Role Description
  Accessible without login Plain text file config.js Aux. Auxiliary script

  Files folder image Files  /  dist  
File Role Description
  Plain text file Arc.js Class Class source
  Plain text file Line.js Class Class source
  Accessible without login Plain text file react-svg-components.js Aux. Auxiliary script
  Plain text file Rectangle.js Class Class source

  Files folder image Files  /  src  
File Role Description
Files folder imagestories (3 files)
  Plain text file Arc.js Class Class source
  Plain text file Line.js Class Class source
  Accessible without login Plain text file react-svg-components.js Aux. Auxiliary script
  Plain text file Rectangle.js Class Class source

  Files folder image Files  /  src  /  stories  
File Role Description
  Accessible without login Plain text file Arc.js Aux. Auxiliary script
  Accessible without login Plain text file Line.js Aux. Auxiliary script
  Accessible without login Plain text file Rectangle.js Aux. Auxiliary script

  Files folder image Files  /  __tests__  
File Role Description
Files folder image__snapshots__ (3 files)
  Accessible without login Plain text file Arc.test.js Example Example script
  Accessible without login Plain text file Line.test.js Example Example script
  Accessible without login Plain text file Rectangle.test.js Example Example script

  Files folder image Files  /  __tests__  /  __snapshots__  
File Role Description
  Accessible without login Plain text file Arc.test.js.snap Data Auxiliary data
  Accessible without login Plain text file Line.test.js.snap Data Auxiliary data
  Accessible without login Plain text file Rectangle.test.js.snap Data Auxiliary data

 Version Control Unique User Downloads Download Rankings  
 100%
Total:25
This week:0
All time:531
This week:5Up