Installing

``bash $ npm install react-flipcard

`or`


$ bower install react-flipcard


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

{/* Thedisabledattribute allows turning off the auto-flip on hover, or focus. This allows manual control over flipping.

The flippedattribute indicates whether to show the front, or the back, withtruemeaning show the back. */} disabled={true} flipped={this.state.isFlipped} onFlip={this.handleOnFlip} onKeyDown={this.handleKeyDown} >


            Front

            
            (manual flip)


          
            Back


    );
  }
});

React.render(, document.getElementById('container'));``

Credits

This component is largely a React wrapper for CSS created by David Walsh.

License

MIT

or

$ bower install react-flipcard

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

{/* Thedisabledattribute allows turning off the auto-flip on hover, or focus. This allows manual control over flipping.


            Front

            
            (manual flip)


          
            Back

);
}
});

React.render(, document.getElementById('container'));