React Box Flip

React Box Flips allows you to flip boxes in your React app.

Demo

Live demo can be viewed here.

Installation

To use react-box-flip, install it from NPM with npm using the command:

npm install react-box-flip

Or, you can also use the yarn package manager:

yarn add react-box-flip

Usage

To use react-box-flip, you need to import it in your React app:

import ReactBoxFlip from 'react-box-flip';

Then to use it in your react application you need to provide two child components to the ReactBoxFlip component:

• Front: The component that will be displayed when the box is not flipped.
• Back: The component that will be displayed when the box is flipped.

The component only allows for a manual flip.

The flip animation is controlled by a isFlipped prop. There is no need to provide a default value for this prop.

import React from 'react';
import ReactBoxFlip from 'react-box-flip';

function App() {
    const [isFlipped, setIsFlipped] = useState(false);

    function handleClick() {
        setIsFlipped(!isFlipped);
    }

    return (
        <>
        <button onClick={handleClick}> Flip </button>
            <ReactBoxFlip isFlipped={isFlipped}>
                <Front>
                    <h1>Front</h1>
                </Front>
                <Back>
                    <h1>Back</h1>
                </Back>
            </ReactBoxFlip>
        </>
    );
}

Props

Props	Type	Description	Default
isFlipped	boolean	Boolean that controls the flip animation.	undefined
isVertical	boolean	Boolean that controls if the box needs to flip in which direction	false

Contributing

Contributions, issues and feature requests are welcome! Feel free to check issues page.

License

Copyright © 2021 shubhambattoo. This project is MIT licensed.