ReactJsFlipCard

* Highly customizable flip card
* Diagonal flip support
* Small bundle size

works with: React >= 16.8

important! Changed some props from version 2.x.x.
Starting from version 2, there will be no CSS conflicts thanks to :where and module.css.

More about
Specificity,
the :where exception and
css modules

Getting Started

You can install the module via npm or yarn:

``

sh

npm install reactjs-flip-card

sh

yarn add reactjs-flip-card





Demo

Live Demo



Project Structure

The project includes a demo folder initialized with Create React App.



When you run the command

`build` from reactjs-flip-card `package.json`, a `dist` and a `lib`

 folder will be generated.



The

`lib`

 folder will be placed automatically into the demo project.



You can move into

`demo` directory and `start`

 project from its own package.json script, just like any other Create React App.



Usage



You can pass style or CSS classes through props.

~~Note that the style is the one that will have the highest priority.~~ (Not true for version 2.x.x. You can pass your custom classNames and they will get higher priority).



Please do not pass

background or backgroundColor property into flipCardStyle

 as it may cause unexpected behaviours 

on different browsers. Use the props

frontStyle and backStyle



and pass the same style. You could have also used

frontCss and backCss

 passing your custom classes

js

import ReactFlipCard from 'reactjs-flip-card'



function App() {

    

    const styles = {

        card: {background: 'blue', color: 'white', borderRadius: 20,},

    }

    

    return (

                    frontStyle={styles.card}

            backStyle={styles.card}

            frontComponent={Hover me!}

            backComponent={Back!}

        />

    );

}





More examples on

demo/src/App.js





Props V2.x.x



|Name|Type|Default|Description|

|:--|:--:|:-----:|:----------|

|containerStyle|CSSProperties|

{}|The `style`

 of the div container|

|containerCss|string|

''|The additional `className`

 of the div container|

|flipCardStyle|CSSProperties|

{}|The `style` of the card itself. Important: please do not pass background or background color property here as it may cause unexpected behaviours on different browsers. Use the props frontStyle and backStyle

 and pass the same style there|

|flipCardCss|string|

''|The additional `className` of the card itself. Important: please do not pass background or background-color property here as it may cause unexpected behaviours on different browsers. Use the props frontCss and backCss

 and pass the same css there |

|frontStyle|CSSProperties|

{}|The `style`

 of the front card|

|frontCss|string|

''|The additional `className`

 of the front card|

|backStyle|CSSProperties|

{}|The `style`

 of the back card|

|backCss|string|

''|The additional `className`

 of the back card|

|direction|'vertical'|
'horizontal'|
'diagonal'|

horizontal

|The direction of the flip card|

|flipTrigger|'onClick'|
'onHover'|
'disabled'||

'onHover'

|The event that trigger the flip|

|flipByProp|boolean|
undefined|

undefined|Eventually handle flip from boolean prop. Eventually you can set flipTrigger to 'disabled'

 if this prop is enabled|

|frontComponent|ReactNode|

required

|Any JSX Component|

|backComponent|ReactNode|

required

|Any JSX Component|

|onClick|MouseEventHandler|

_=>un...ed

|Any callback assigned to the onClick event. This event relates to the card container|

|onMouseEnter|MouseEventHandler|

_=>un...ed

|Any callback assigned to the onMouseEnter event. This event relates to the card container|

|onMouseLeave|MouseEventHandler|

_=>un...ed

|Any callback assigned to the onMouseLeave event. This event relates to the card container|



Props V1.x.x



width | height | cursor: removed in version 2. Optionally Pass them into

containerStyle orcontainerCss

 for version 2. Same default values



flipCardContainerStyle : renamed as

containerStyle

 in version 2



flipCardContainerCss : renamed as

containerCss

 in version 2



transitionDuration : removed in version 2. Optionally Pass it into

flipCardStyle or flipCardCss

. Same default value





|Name|Type|Default|Description|

|:--|:--:|:-----:|:----------|

|width|CSSProperties|

'100px'

| The width of the div container|

|height|CSSProperties|

'100px'

|The height of the div container|

|cursor|CSSProperties|

'default'

|The cursor type that appear when mouse hover the div container|

|transitionDuration|CSSProperties|

'0.5s'

|The transition duration of the div container|

|flipCardContainerStyle|CSSProperties|

{}|The `style`

 of the div container|

|flipCardContainerCss|string|

''|The additional `className`

 of the div container|

|flipCardStyle|CSSProperties|

 and pass the same style there|

|flipCardCss|string|

 and pass the same css there |

|frontStyle|CSSProperties|

{}|The `style`

 of the front card|

|frontCss|string|

''|The additional `className`

 of the front card|

|backStyle|CSSProperties|

{}|The `style`

 of the back card|

|backCss|string|

''|The additional `className`

 of the back card|

|direction|'vertical'|
'horizontal'|
'diagonal'|

horizontal

|The direction of the flip card|

|flipTrigger|'onClick'|
'onHover'|
'disabled'||

'onHover'

|The event that trigger the flip|

|flipByProp|boolean|
undefined|

undefined|Eventually handle flip from boolean prop. Eventually you can set flipTrigger to 'disabled'

 if this prop is enabled|

|frontComponent|ReactNode|

required

|Any JSX Component|

|backComponent|ReactNode|

required

|Any JSX Component|

|onClick|MouseEventHandler|

_=>un...ed

|Any callback assigned to the onClick event. This event relates to the card container|

|onMouseEnter|MouseEventHandler|

_=>un...ed

|Any callback assigned to the onMouseEnter event. This event relates to the card container|

|onMouseLeave|MouseEventHandler|

_=>un...ed`|Any callback assigned to the onMouseLeave event. This event relates to the card container|

Contributing and Support

Contributions of any kind are welcome.

If this package was helpful to you, please consider putting a star on the GitHub project.

License

MIT

ReactJsFlipCard

Getting Started

You can install the module via npm or yarn:

``

sh

npm install reactjs-flip-card

sh

yarn add reactjs-flip-card





Demo

Live Demo



Project Structure

The project includes a demo folder initialized with Create React App.



When you run the command

`build` from reactjs-flip-card `package.json`, a `dist` and a `lib`

 folder will be generated.



The

`lib`

 folder will be placed automatically into the demo project.



You can move into

`demo` directory and `start`

 project from its own package.json script, just like any other Create React App.



Usage



You can pass style or CSS classes through props.

~~Note that the style is the one that will have the highest priority.~~ (Not true for version 2.x.x. You can pass your custom classNames and they will get higher priority).



Please do not pass

background or backgroundColor property into flipCardStyle

 as it may cause unexpected behaviours 

on different browsers. Use the props

frontStyle and backStyle



and pass the same style. You could have also used

frontCss and backCss

 passing your custom classes

js

import ReactFlipCard from 'reactjs-flip-card'



function App() {

    

    const styles = {

        card: {background: 'blue', color: 'white', borderRadius: 20,},

    }

    

    return (

                    frontStyle={styles.card}

            backStyle={styles.card}

            frontComponent={Hover me!}

            backComponent={Back!}

        />

    );

}





More examples on

demo/src/App.js





Props V2.x.x



|Name|Type|Default|Description|

|:--|:--:|:-----:|:----------|

|containerStyle|CSSProperties|

{}|The `style`

 of the div container|

|containerCss|string|

''|The additional `className`

 of the div container|

|flipCardStyle|CSSProperties|

 and pass the same style there|

|flipCardCss|string|

 and pass the same css there |

|frontStyle|CSSProperties|

{}|The `style`

 of the front card|

|frontCss|string|

''|The additional `className`

 of the front card|

|backStyle|CSSProperties|

{}|The `style`

 of the back card|

|backCss|string|

''|The additional `className`

 of the back card|

|direction|'vertical'|
'horizontal'|
'diagonal'|

horizontal

|The direction of the flip card|

|flipTrigger|'onClick'|
'onHover'|
'disabled'||

'onHover'

|The event that trigger the flip|

|flipByProp|boolean|
undefined|

undefined|Eventually handle flip from boolean prop. Eventually you can set flipTrigger to 'disabled'

 if this prop is enabled|

|frontComponent|ReactNode|

required

|Any JSX Component|

|backComponent|ReactNode|

required

|Any JSX Component|

|onClick|MouseEventHandler|

_=>un...ed

|Any callback assigned to the onClick event. This event relates to the card container|

|onMouseEnter|MouseEventHandler|

_=>un...ed

|Any callback assigned to the onMouseEnter event. This event relates to the card container|

|onMouseLeave|MouseEventHandler|

_=>un...ed

|Any callback assigned to the onMouseLeave event. This event relates to the card container|



Props V1.x.x



width | height | cursor: removed in version 2. Optionally Pass them into

containerStyle orcontainerCss

 for version 2. Same default values



flipCardContainerStyle : renamed as

containerStyle

 in version 2



flipCardContainerCss : renamed as

containerCss

 in version 2



transitionDuration : removed in version 2. Optionally Pass it into

flipCardStyle or flipCardCss

. Same default value





|Name|Type|Default|Description|

|:--|:--:|:-----:|:----------|

|width|CSSProperties|

'100px'

| The width of the div container|

|height|CSSProperties|

'100px'

|The height of the div container|

|cursor|CSSProperties|

'default'

|The cursor type that appear when mouse hover the div container|

|transitionDuration|CSSProperties|

'0.5s'

|The transition duration of the div container|

|flipCardContainerStyle|CSSProperties|

{}|The `style`

 of the div container|

|flipCardContainerCss|string|

''|The additional `className`

 of the div container|

|flipCardStyle|CSSProperties|

 and pass the same style there|

|flipCardCss|string|

 and pass the same css there |

|frontStyle|CSSProperties|

{}|The `style`

 of the front card|

|frontCss|string|

''|The additional `className`

 of the front card|

|backStyle|CSSProperties|

{}|The `style`

 of the back card|

|backCss|string|

''|The additional `className`

 of the back card|

|direction|'vertical'|
'horizontal'|
'diagonal'|

horizontal

|The direction of the flip card|

|flipTrigger|'onClick'|
'onHover'|
'disabled'||

'onHover'

|The event that trigger the flip|

|flipByProp|boolean|
undefined|

undefined|Eventually handle flip from boolean prop. Eventually you can set flipTrigger to 'disabled'

 if this prop is enabled|

|frontComponent|ReactNode|

required

|Any JSX Component|

|backComponent|ReactNode|

required

|Any JSX Component|

|onClick|MouseEventHandler|

_=>un...ed

|Any callback assigned to the onClick event. This event relates to the card container|

|onMouseEnter|MouseEventHandler|

_=>un...ed

|Any callback assigned to the onMouseEnter event. This event relates to the card container|

|onMouseLeave|MouseEventHandler|

_=>un...ed`|Any callback assigned to the onMouseLeave event. This event relates to the card container|

Contributing and Support

Contributions of any kind are welcome.

If this package was helpful to you, please consider putting a star on the GitHub project.

License

MIT