Skip to content

Latest commit

 

History

History
50 lines (36 loc) · 986 Bytes

README.md

File metadata and controls

50 lines (36 loc) · 986 Bytes
Raw

React-flipme

Install

npm i react-flipme

Usage

Step 1: Import card component

import { FlipCard } from "react-flipme"

Step 2: Add Front and Back components

<FlipCard>
    <FlipCard.Front>
        Front {/* Any component or element */}
    </FlipCard.Front>
    <FlipCard.Back>
        Back {/* Any component or element */}
    </FlipCard.Back>
</FlipCard>

Step 3: Get the result

Example

Docs

React-flipme has following customizable properties:

  • style - any css styles you want
  • variant - "light" | "dark"
  • size - "xs" | "s" | "m" | "l" | "xl" ("m" by default)
  • rounded - boolean
  • flipped* - boolean
  • width - string
  • height - string

*if "flipped" prop is provided, the control of the card will be automatically switched to the manual mode. It will disable its default behaivior (flip on hover will become unavailable)