flip-card-react v1.1.0

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

License

MIT