A React component for making state transition from a list of props
(日本語)
It can not be used directly by the browser.
You need to use a bundler like browserify/webpack.
npm install --save react-flip-book
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"
- Without changing the original components, you can apply a simple flip animation, such as a cartoon
- If you set
[]
totransition
, that is same as normal rendering