Card Flip Animation In React

Description:

A smooth card component with flip animation implement in React Motion.

Installation:

# Yarn
$ yarn add react-flop-card
# NPM
$ npm install react-flop-card --save

Usage:

<FlipCard
  flipped={ true } onClick={ onClick }
  onMouseOut={ onMouseOut } onMouseOver={ onMouseOver }
  frontChild={ frontChild } backChild={ backChild }
  width={ 100 } height={ 100 }
  style={ { front, back, wrapper } }/>

Default props.

Style: PropTypes.shape({
  front: PropTypes.object,
  back: PropTypes.object,
  wrapper: PropTypes.wrapper
}),
frontChild: PropTypes.element,
backChild: PropTypes.element,
width: PropTypes.oneOf(PropTypes.number, PropTypes.string),
height: PropTypes.oneOf(PropTypes.number, PropTypes.string),
degree: PropTypes.number,
onClick: PropTypes.func,
onMouseOut: PropTypes.func,
onMouseOver: PropTypes.func

Preview: