thoriqdharmawan/react-flip

flip flop flup :construction: flip your React component :carousel_horse: :carousel_horse:

react-flip

"D

Install

npm install --save react-flip

Usage

import React, { Component } from "react";

import { Wrapper } from "react-flip";

const Example = () => {
  const style = {
    content: {
      backgroundColor: "#bbb",
      position: "absolute",
      width: "100%",
      height: "100%",
      backfaceVisibility: "hidden",
    },
    content2: {
      backgroundColor: "#2980b9",
      position: "absolute",
      width: "100%",
      height: "100%",
      backfaceVisibility: "hidden",
      transform: "rotateY(180deg)",
    },
  };

  return (
    <Wrapper
      trigger="hover"
      direction="vertical"
      flipForward
      rotation="left"
      duration={0.6}
      flipCount={1}
      perspective="900px"
    >
      <div style={style.content} />
      <div style={style.content2} />
    </Wrapper>
  );
};

License

MIT © thoriqdharmawan