A React card flipper component.
npm install react-card-flipper

!GitHub issues
!license
A React card flipper component (built with React 16.2.0) that can be triggered by hover or click. Inspired
from David Walsh's great tutorial.
yarn add react-card-flipper
npm install react-card-flipper --save
Initial testing via BrowserStack of a React app that simply renders the card
component.
| Browser | Support | Notes |
| --------------- | :-----: | ---------------------------- |
| Chrome >= 38 | ✅ | |
| Edge >= 14 | ✅ | |
| Firefox >= 16 | ✅ | |
| IE 11-10 | ⚠️ | Card flips have no animation |
| IE 9.0 | ❌ | No toggling of cards |
| Opera >= 30 | ✅ | |
| Safari >= 6.2.8 | ✅ | |
| Safari 6.0.5 | ⚠️ | Card flips have no animation |
You can import react-card-flipper into your React app. The following is a bare
bones example.
> Important: The `` ReactDOM.render( The | Prop / Option | Accepted Prop(s) | Default | Description | #### Example: You Clicked! Out of the box we provide very little styling aside from core styles like transitions To get started developing on this project, fork or clone the repo. Then run #### Start the development server ##### Starts the development/test server and polls for changes. #### Running EsLint ##### Lints #### Running Tests ##### Runs EsLint, and builds the test output. #### Running Production Build ##### Compiles a new build in the component must have two elements, one for the front and one for the back.js
import React from "react";
import ReactDOM from "react-dom";
import ReactCardFlipper from "react-card-flipper";
,
The cards front content goes here.
The cards back content goes here.
document.getElementById("root")
);
`ReactCardFlipperProps and Options
component has 4 props it accepts that you can use to adjustwidth
how your card behaves.
| ------------- | :-------------------------: | :-----: | ----------------------------------------------------------------------------------- |
| | String (ex: 300px) | auto | Card width. |height
| | String (ex: 600px) | auto | Card height. |behavior
| | String (click or hover) | click | If the card should click to flip, or hover to flip. |levitate
| | Boolean | false | If the card should "levitate" up on hover. Only applied when behavior is click. |`js`
render() {
return(
Click me to learn more
)
}innerCardClassStyling
to let you shape the design as you see fit. You can style your cards by passing className's as props.
To style the card itself, you want to use , for the card container itself youclassName
would use a normal . You can see a working example here or reference the following code snippet (this example is using react-jss):`js`
height="400px"
behavior="click"
className={classes.root}
innerCardClass={classes.card}
>
You can click me, go ahead... Try it.
Great job! You win person of the month.yarn installDevelopment
yarn startyarn lintReactCardFlipper.js and outputs any warnings or errors.yarn testyarn builddist/` folder.