react-flipcard3d v0.0.33

react-flipcard3d

Demo

Install

yarn add react-flipcard3d

then install peer dendencies:

yarn add react@16.7.0-alpha.2
yarn add react-dom@16.7.0-alpha.2
yarn add @emotion/core
yarn add @emotion/styled

If using npm replace yarn add with npm install

Usage

import FlipCard from 'react-flipcard3d';
...
<FlipCard>
    <FlipCard.Front>
        ...
    </FlipCard.Front>
    <FlipCard.Back>
        ...
    </FlipCard.Back>
</FlipCard>

Props

All props are optional

axis (string)

duration (integer)

duration of flip animation in milliseconds

reverse (boolean)

reverse the flip direction

onFlipped (function)

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.