Skip to content
Animated shuffling of child components on change
Branch: master
Clone or download
Latest commit 7ca72d3 Apr 15, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
lib updated babel, added build config, added npm prepublish script Oct 30, 2016
src Merge pull request #25 from marcelopereirascmspain/fix/dont-transfer-… Aug 30, 2016
test/helpers initial Jun 17, 2015
.babelrc
.eslintrc initial Jun 17, 2015
.gitignore removing npm-debug.log; updated ignores Jun 18, 2015
Gulpfile.js build Oct 8, 2015
LICENSE initial Jun 17, 2015
README.md Update README.md Apr 15, 2019
index.js initial Jun 17, 2015
karma.conf.js initial Jun 17, 2015
package.json `webpack@4` / `webpack@next` will support `package.json:sideEffects: … Feb 5, 2018
webpack.config.js initial Jun 17, 2015
webpack.dist.config.js initial Jun 17, 2015

README.md

Maintenance Status

react-shuffle

Animated shuffling of child components

Install

npm install react-shuffle

Preview

http://i.imgur.com/B1RFfvj.gif

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

Maintenance Status

Archived: This project is no longer maintained by Formidable. We are no longer responding to issues or pull requests unless they relate to security concerns. We encourage interested developers to fork this project and make it their own!

You can’t perform that action at this time.