Skip to content

Repository for react-box-flip, a react component to achieve flip animation using css

License

Notifications You must be signed in to change notification settings

shubhambattoo/react-box-flip

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

Repository for react-box-flip, a react component to achieve flip animation using css

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published