reactjs-flip-card v2.0.3

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

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

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