flip-card-react

A react component to card flip

Install

npm install flip-card-react

Examples

To try the examples locally:

cd examples/
npm install
npm start

Usage

import React, { useState } from 'react';
import FlipCard from 'flip-card-react';

const cardStyle = {
    padding: 25,
    border: "solid 1px",
    borderRadius: 5,
    color: "#fff",
    width: 150
};

const App = () => {
    const [isFlipped, setFlipped] = useState(false);

    const front = (
        <div onClick={() => setFlipped(x => !x)} style={{ ...cardStyle, background: "#999" }}>
            Click to see the back
        </div>
    );

    const back = (
        <div onClick={() => setFlipped(x => !x)} style={{ ...cardStyle, background: "#444" }}>
            Click to see the front
        </div>
    );

    return (
        <div style={{padding: 5, border: "solid", position: "absolute"}}>
            <FlipCard isFlipped={isFlipped} front={front} back={back}/>
        </div>
    );
}

export default App;

Properties

| Props | Type | Description | Default | | ----- | ---- | ----------- | ------- | | front | ReactNode | Front face of the card | required | | back | ReactNode | Back face of the card | required | | isFlipped | bool | false: show the front of the card, true: show the back of the card | false | | speed | number | The speed of the flip animation, the higher the slower | 0.6 | | onFlip | function | Function to be triggered when the card flips | undefined | | vertical | bool | If it exists, the card flips on vertical direction (otherwise horizontal) | undefined | | perspective | bool | If it exists, the card flips with 3D animation (otherwise flat) | undefined | | infinite | bool | If it exists, the card always flips to right/up (otherwise toggles between directions) | undefined |

License

MIT