react-flipcard-2
v0.3.2
React Flip Card - Revamped to work with React 16+
9/weekUpdated 3 years agoMIT
Published by Matt Zabriskie, Braden R. Napier
npm install react-flipcard-2React Flipcard (React 16 Version)
React Flip Card - Revamped
$3
``
yarn add react-flipcard-2
or
`
npm install --save react-flipcard-2
Demo
http://mzabriskie.github.io/react-flipcard/basic
Example
`js
import React from 'react';
import FlipCard from 'react-flipcard';
var App = React.createClass({
getInitialState() {
return {
isFlipped: false
};
},
showBack() {
this.setState({
isFlipped: true
});
},
showFront() {
this.setState({
isFlipped: false
});
},
handleOnFlip(flipped) {
if (flipped) {
this.refs.backButton.getDOMNode().focus();
}
},
handleKeyDown(e) {
if (this.state.isFlipped && e.keyCode === 27) {
this.showFront();
}
},
render() {
return (
{/ Default behavior is horizontal flip on hover, or focus /}
{/ The first child is used as the front of the card /}
Front
(horizontal flip)
{/ The second child is used as the back of the card /}
Back
{/ The type attribute allows using a vertical flip /}
Front
(vertical flip)
Back
{/*
The disabled attribute allows turning off the auto-flip
on hover, or focus. This allows manual control over flipping.
The flipped attribute indicates whether to show the front,true
or the back, with meaning show the back.
*/}
flipped={this.state.isFlipped}
onFlip={this.handleOnFlip}
onKeyDown={this.handleKeyDown}
>
Front
(manual flip)
Back
);
}
});
React.render(
``
Credits
This component is largely a React wrapper for CSS created by David Walsh.
License
MIT