emanuelecaurio / react-flip-card

Highly customizable flip card

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:

npm install reactjs-flip-card

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

import ReactFlipCard from 'reactjs-flip-card'

function App() {
    
    const styles = {
        card: {background: 'blue', color: 'white', borderRadius: 20,},
    }
    
    return (
        <ReactFlipCard
            frontStyle={styles.card}
            backStyle={styles.card}
            frontComponent={<div>Hover me!</div>}
            backComponent={<div>Back!</div>}
        />
    );
}

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	{}	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

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

react-flip-card's Issues

Issue

Error in function ReactFlipCard in ./node_modules/reactjs-flip-card/dist/ReactFlipCard.js:34
Error in gatsby js

32 | setIsFlipped(flipByProp);
33 | }, [flipByProp]);

34 | return (React.createElement("div", { style: containerStyle, className: ${cssMod.container} ${containerCss} , onMouseEnter: (e) => {
| ^
35 | if (flipTrigger === FlipTrigger.onHover) {
36 | setIsFlipped(!isFlipped);
37 | }