React flip card component
npm install react-flipcard#react-flipcard
React flip card component
``bash`
$ npm install react-flipcardor
$ bower install react-flipcard
http://mzabriskie.github.io/react-flipcard/basic
`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 (
{/ 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(
``
This component is largely a React wrapper for CSS created by David Walsh.
MIT