Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/saschwarz/react-svgpathplayer
A ReactJS player component for animating and stepping through SVG paths.
https://github.com/saschwarz/react-svgpathplayer
Last synced: 5 days ago
JSON representation
A ReactJS player component for animating and stepping through SVG paths.
- Host: GitHub
- URL: https://github.com/saschwarz/react-svgpathplayer
- Owner: saschwarz
- License: mit
- Created: 2015-12-10T02:34:24.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2016-08-31T18:31:54.000Z (about 8 years ago)
- Last Synced: 2024-09-19T19:44:31.559Z (2 months ago)
- Language: JavaScript
- Homepage: http://saschwarz.github.io/react-svgpathplayer/
- Size: 548 KB
- Stars: 48
- Watchers: 3
- Forks: 9
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](http://travis-ci.org/saschwarz/react-svgpathplayer) [](https://www.bithound.io/github/saschwarz/react-svgpathplayer) [](https://david-dm.org/saschwarz/react-svgpathplayer) [](https://www.npmjs.com/package/react-svgpathplayer) [](https://github.com/semantic-release/semantic-release) [](https://github.com/saschwarz/react-svgpathplayer/blob/master/LICENSE)
# react-svgpathplayer
## Description/Features
This player component loads an [SVG](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics) image as it's child element using [Snap.svg](http://snapsvg.io/). It has two modes of operation: play/pause animation of a `path` element and/or forward/backward display of `path` elements contained in a parent element ("stepped" path or "stepping").
An SVG [marker](http://www.w3.org/TR/SVG/painting.html#Markers) can also be specified to follow the leading end of the the path during animation and to be positioned at the end of stepped paths.
The player is configured by supplying CSS selector strings for the animated path, parent element of stepped segments, and marker. These strings are supplied to SnapSVG's `select` method and are applied only to the SVG element in the DOM. CSS class selectors are recommended if multiple players will be used on a single page; if `id`s are used in SVG images they must be globally unique to the page.
The presence/absence of `path` and `segments` properties enables/disables their respective control buttons and display sections.
The player's controls can be hidden and the path can be animated once or looped repeatedly. See the demo for configuration examples.
## Usage
### As a Component Within a React Application
See the [demo](http://saschwarz.github.io/react-svgpathplayer/) for example usage of this component and the composition of the SVG images.
Install the component:
```
npm install react-svgpathplayer
```
Unfortunately, `Snap.svg` doesn't integrate well with the `npm` infrastructure; it is easiest to just includes it in the HTML or take a look at the `demoConfig` in the `webpack.config.babel.js` file.
Include the component in the application, provide it's `props`, and render it:
```javascript
import SVGPathPlayer from 'react-svgpathplayer';
require('./images/pathsegments.svg');
export default class Demo extends React.Component {
render() {
let props = {svg:'./images/pathsegments.svg',
path:'.dog-path-0',
segments:'.dog-path-segments-0',
marker:'.dog',
units:'yd',
scale:1/36.0,
loading:true,
time:10236};
return ();
}
}
```
### As a JavaScript Component
See the [demo](http://saschwarz.github.io/react-svgpathplayer/script.html) using this component in a plain HTML/JS file.
A UMD build for use directly in the browser is available via CDN at https://npmcdn.com/react-svgpathplayer@latest/dist/react-svgpathplayer.min.js, https://npmcdn.com/react-svgpathplayer@latest/dist/react-svgpathplayer.js with corresponding map files.
You'll need to include all the dependencies:
```
...
var props1 = {svg:"./images/pathsegments.svg", path:".dog-path-0", segments:".dog-path-segments-0", marker:".dog", units:"yd", scale:1/36.0, loading:true, time:10236};
ReactDOM.render(React.createElement(SVGPathPlayer, props1), document.getElementById('player'));
...
```
## Developers
* Linting - **npm run lint** - Runs ESLint.
* Developing - **npm start** - Runs the development server at *localhost:8080* and use Hot Module Replacement. You can override the default host and port through env (`HOST`, `PORT`).
* Testing - **npm test** - Runs a single pass through the tests and writes coverage to `build` directory.
* TDD - **npm run tdd** - watches for file changes and re-runs tests/coverage
## License
*react-svgpathplayer* is available under the MIT license. See LICENSE for more details.