Card Flipping Animation In React – ReactCardFlip

Category: Animation , React | December 30, 2017
Author: AaronCCWong
Views Total: 212
Official Page: Go to website
Last Update: December 30, 2017
License: MIT

React Card Flip is a React component which allows you to use the card flipping animation.

Installation:

# NPM
$ npm install react-card-flip --save

Usage:

import React from 'react';
import ReactDOM from 'react-dom';
import ReactCardFlip from 'react-card-flip';

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      isFlipped: false
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e) {
    e.preventDefault();
    this.setState({ isFlipped: !this.state.isFlipped });
  }

  render() {
    return (
      <ReactCardFlip isFlipped={this.state.isFlipped}>
        <YOUR_FRONT_CCOMPONENT key="front">
          This is the front of the card.
          <button onClick={this.handleClick}>Click to flip</button>
        </FrontComponent>

        <YOUR_BACK_COMPONENT key="back">
          This is the back of the card.
          <button onClick={this.handleClick}>Click to flip</button>
        </BackComponent>
      </ReactCardFlip>
    )
  }
}

Props.

{
  flipSpeedBackToFront: 0.6,
  flipSpeedFrontToBack: 0.6,
  infinite: false,
  isFlipped: false,
};

Preview:

react-card-flip