Download .zip |
Info | Documentation | View files (24) | Download .zip | Reputation | Support forum | Blog | Links |
Last Updated | Ratings | Unique User Downloads | Download Rankings | |||||
2018-10-02 (8 months ago) | Not yet rated by the users | Total: 17 | All time: 533 This week: 5 |
Version | License | JavaScript version | Categories | |||
react-svg-components 1.0.0 | Custom (specified... | 5 | Animation, HTML, Graphics |
Description | Author | ||||||||
This package can be used to generate animated graphics in SVG using React JS. |
|
SVG components built with [React][react].
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'}/>
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 |
File | Role | Description | ||
---|---|---|---|---|
.storybook (1 file) | ||||
dist (4 files) | ||||
src (4 files, 1 directory) | ||||
__tests__ (3 files, 1 directory) | ||||
.babelrc | Data | Auxiliary data | ||
.travis.yml | Data | Auxiliary data | ||
gulpfile.js | Aux. | Auxiliary script | ||
LICENSE | Lic. | License text | ||
package.json | Data | Auxiliary data | ||
README.md | Doc. | Documentation |
Files | / | dist |
File | Role | Description |
---|---|---|
Arc.js | Class | Class source |
Line.js | Class | Class source |
react-svg-components.js | Aux. | Auxiliary script |
Rectangle.js | Class | Class source |
Files | / | src |
File | Role | Description | ||
---|---|---|---|---|
stories (3 files) | ||||
Arc.js | Class | Class source | ||
Line.js | Class | Class source | ||
react-svg-components.js | Aux. | Auxiliary script | ||
Rectangle.js | Class | Class source |
Files | / | src | / | stories |
File | Role | Description |
---|---|---|
Arc.js | Aux. | Auxiliary script |
Line.js | Aux. | Auxiliary script |
Rectangle.js | Aux. | Auxiliary script |
Files | / | __tests__ |
File | Role | Description | ||
---|---|---|---|---|
__snapshots__ (3 files) | ||||
Arc.test.js | Example | Example script | ||
Line.test.js | Example | Example script | ||
Rectangle.test.js | Example | Example script |
Files | / | __tests__ | / | __snapshots__ |
File | Role | Description |
---|---|---|
Arc.test.js.snap | Data | Auxiliary data |
Line.test.js.snap | Data | Auxiliary data |
Rectangle.test.js.snap | Data | Auxiliary data |
react-svg-components-2018-10-02.zip 17KB | |
react-svg-components-2018-10-02.tar.gz 7KB | |
Install with Composer |
Version Control | Unique User Downloads | Download Rankings | |||||||||||||||
100% |
|
|
Applications that use this package |
If you know an application of this package, send a message to the author to add a link here.