Skip to content

Flipping Cards for your React Projects. React-Flippy allows you to create flipper event with your content.

License

Notifications You must be signed in to change notification settings

sbayd/react-flippy

Repository files navigation

React-Flippy

React-Flippy allows you to create flipping cards in React projects. It can be used as controlled or uncontrolled component.

Vertical

Horizontal

Live Demo

How to install ?

npm install react-flippy or yarn add react-flippy

How to use ?

import { useRef } from 'react';
import Flippy, { FrontSide, BackSide } from 'react-flippy';

function Sample() {
  const ref = useRef();
  return (
    <Flippy
      flipOnHover={false} // default false
      flipOnClick={true} // default false
      flipDirection="horizontal" // horizontal or vertical
      ref={ref} // to use toggle method like ref.curret.toggle()
      // if you pass isFlipped prop component will be controlled component.
      // and other props, which will go to div
      style={{ width: '200px', height: '200px' }} /// these are optional style, it is not necessary
  >
    <FrontSide style={{ backgroundColor: '#41669d'}} >
      RICK <br />
      <button onClick={() => { ref.current.toggle(); }}> Toggle via button</button>
    </FrontSide>
    <BackSide style={{ backgroundColor: '#175852'}}>
      ROCKS
    </BackSide>
  </Flippy>
  )
}

API for Components

Flippy

Prop Name Description Values Default
flipDirection Direction of flip effect horizontal/vertical horizontal
flipOnHover Should card flip on mouse hover true/false false
flipOnClick Should card click on mouse click/touch true/false true
isFlipped If you pass isFilipped prop component will be "controlled react component" and flipOnHover, flipOnClick functions will not work. You must handle this functionalities with your own logic. undefined/true/false undefined
...props Other props will be passed to container.

Note: Flippy component has a function named "toggle" in its reference.

FrontSide

Prop Name Description Values Default
animationDuration Duration of flip animation, should be used equal with back side for a good view. number 600
elementType Dom element type for card dom element types div
...props Other props will be passed to card.

BackSide

Prop Name Description Values Default
animationDuration Duration of flip animation, should be used equal with front side for a good view. number 600
elementType Dom element type for card dom element types div
...props Other props will be passed to card.

Notes

To run sample project, clone the repository and run yarn && yarn start To build project, clone repository and run yarn && yarn build

Changelog

1.0.0 - 1.1.0 (10 May, 2021)

  • React updated to 17.0.2
  • Component converted to react-hook
  • Dependencies upgraded
  • Fixed bugs

0.1.5 New build system targeting es5 modules.

Credits

Thanks to: https://github.com/fffilo/flipper I have used same methodology for style management.

About

Flipping Cards for your React Projects. React-Flippy allows you to create flipper event with your content.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published