React-Flippy

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

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.2.0 - 1.2.1

• React updated to 18.2.0

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.