React Side Flipper Animation

A very bare-bones and simple component for animating a card flip on your React.JS page.

Installation

    npm i card-flipper-animator

Usage

• Import

import CardFlipper from 'card-flipper-animator';

• Component

    <CardFlipper 
        frontComponent={<YourComponent/>}
        backComponent={<YourSecondComponent/>}
        onClickAction={true}
        onHoverAction={false}
        backBackgroundColor='#fff'
        frontBackgroundColor='#fff'
        borderRadius={0}
        hasShadow
        animationEffect='left'
    />

• Attributes

|Name | Type | Usage | | ------------------- | ------------------ | ----------------------------------------------------------------------- | |frontComponent | React.JSX.Element | The first component that will be displayed. The upper part of the card | |backComponent | React.JSX.Element | The behind of the card. | |onClickAction | Boolean | It will rotate the card on the click. | |onHoverAction | Boolean | It will rotate the card when the mouse enters and leaves. | |backBackgroundCOlor | String (Optional) | Background color of the back of the card. | |frontBackgroundColor | String (Optional) | Background color of the front of the card. | |borderRadius | Number (Optional) | Border radius of the card. | |hasShadow | Boolean (Optional) | Add/Remove Card's shadow | |animationEffect | "left" or "right" | How the card animates. |

License

MIT