yarn add react-flipcard3d
then install peer dendencies:
yarn add [email protected]
yarn add [email protected]
yarn add @emotion/core
yarn add @emotion/styled
If using npm replace yarn add with npm install
import FlipCard from 'react-flipcard3d';
...
<FlipCard>
<FlipCard.Front>
...
</FlipCard.Front>
<FlipCard.Back>
...
</FlipCard.Back>
</FlipCard>*** All props are optional ***
| Value | Description |
|---|---|
| default | 'longest' |
| 'X' | Flip along X axis |
| 'Y' | Flip along Y axis |
| 'longest' | Flip along longest axis |
| 'shortest' | Flip along shortest axis |
| 'random' | Flip along X or Y axis randomly |
duration of flip animation in milliseconds
reverse the flip direction
Callback to be invoked on completion of flip animation
<FlipCard.Front> and <FlipCard.Back> accept a single optional prop color.
You can use any valid css color including 'transparent'. This is handy when the children have their own
background color - a material-ui <Card> component for example.