A React component for making state transitions from a list of props
Switch branches/tags
Clone or download
Latest commit 67a081c Feb 14, 2016
Permalink
Failed to load latest commit information.
dist I had forgatten the build.. Feb 14, 2016
src Fix a bug Feb 14, 2016
test Fix a bug Feb 14, 2016
.babelrc Compile to ES5 Jan 21, 2016
.envrc.example Start up Jan 20, 2016
.gitignore Create a module Jan 20, 2016
LICENSE Initial commit Jan 18, 2016
README.ja.md "transitions" to "transition" / Refactor codes Feb 7, 2016
README.md "transitions" to "transition" / Refactor codes Feb 7, 2016
package.json 0.2.2 Feb 14, 2016

README.md

react-flip-book

npm version

A React component for making state transition from a list of props

(日本語)

Installation

It can not be used directly by the browser.

You need to use a bundler like browserify/webpack.

npm install --save react-flip-book

Usage

If you animate this component..

import React from 'react';

class MyAwesomeMessage extends React.Component {
  render() {
    return <div style={ { color: this.props.color } }>{ this.props.message }</div>;
  }
}

..then wrap by FlipBook meta-component with both realProps and transition.

import FlipBook from 'react-flip-book';

const realProps = {
  color: 'black',
  message: 'Finish',
};

const transition = [
  {
    duration: 1000,
    color: 'red',
    message: 'One',
  },
  {
    duration: 500,
    color: 'green',
    message: 'Two',
  },
  {
    duration: 250,
    color: 'blue',
    message: 'Three',
  },
];

const transitionalMessage = <FlipBook realProps={ realProps } transition={ transition }>
  { props => <MyAwesomeMessage { ...props } /> }
</FlipBook>;

In this case, the component will change like this:

1. red "One"
  |
(1000ms)
  |
2. green "Two"
  |
(500ms)
  |
3. blue "Three"
  |
(250ms)
  |
4. black "Finish"

Features

  • Without changing the original components, you can apply a simple flip animation, such as a cartoon
  • If you set [] to transition, that is same as normal rendering