FormidableLabs/react-shuffle

Name: react-shuffle

Owner: Formidable

Description: Animated shuffling of child components on change

Created: 2015-06-17 18:14:51.0

Updated: 2018-01-14 18:26:49.0

Pushed: 2017-10-05 21:07:53.0

Homepage: null

Size: 35

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

react-shuffle

Animated shuffling of child components

Install

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

 strict';

React = require('react');

Shuffle = require('react-shuffle');

t App = React.createClass({
nder() {
return (
  <Shuffle>
   {// Method to render children goes here}
  </Shuffle>
)



le.exports = App;

Shout out

react-shuffle is heavily inspired by Ryan Florences Magic Move demo https://youtu.be/z5e7kWSHWTg