react-flip-over
v1.0.9React Flip Over
A react component for flipping animation.
Usage
Add to your react app
yarn add react-flip-over
Example
class App extends React.Component {
state = {
flipped: false
}
flip = () => {
this.setState(state => ({
flipped: !state.flipped
}))
}
render() {
const { flipped } = this.state
return (
<div className="App">
<FlipOver flipped={flipped} duration={0.35}>
<div onClick={this.flip}>
<h1>Front Click Me</h1>
</div>
<div onClick={this.flip}>
<h1>Back Click Me</h1>
</div>
</FlipOver>
</div>
)
}
}
API
FlipOver takes 2 children components, one for front and another one for back.
Optional properties:
- flipped?: boolean
- direction?: 'horizontal' | 'vertical'
- style?: 'default' | 'revolve'
- Default: flip back and forth
- Revolve: keep flip to the same direction
- duration?: number
- Control flip speed
- width?: number | string
- in px or %
- height?: number | string
- in px or %
npm i [email protected]
Source Code
github.com/shadowwalker/reac...Metadata
- MIT
- Whatever
- Wei Wang
- released 5/18/2020