react-shuffle
v2.1.0
Published
React Child Shuffler
Downloads
168
Readme
#react-shuffle
Animated shuffling of child components
###Install
npm install react-shuffle
###Preview
Usage
Simply wrap child components with this component and dynamically change them to see them animate. The only real requirement is that each child has a non-index based key, for proper position identification.
Props
| Prop | PropType | Description | | ---- | -------- | ----------- | | duration | React.PropTypes.number | Duration of animation | | fade | React.PropTypes.bool | Should children fade on enter/leave | | scale | React.PropTypes.bool | Should children scale on enter/leave | | intial | React.PropTypes.bool | Should scale/fade occur on first load |
###Example
'use strict';
var React = require('react');
var Shuffle = require('react-shuffle');
const App = React.createClass({
render() {
return (
<Shuffle>
{// Method to render children goes here}
</Shuffle>
)
}
});
module.exports = App;
Shout out
react-shuffle is heavily inspired by Ryan Florences Magic Move demo https://youtu.be/z5e7kWSHWTg