react-box-flip

    1.0.6 • Public • Published

    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.

    Install

    npm i react-box-flip

    DownloadsWeekly Downloads

    10

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    6.49 kB

    Total Files

    5

    Last publish

    Collaborators

    • shubhambatt997