README
react-hover-flip
react-hover-flip
is a simple react component that will flip on hover.
Installation
Using npm
npm i react-hover-flip
Using yarn
yarn add react-hover-flip
CRA Usage
import ReactHoverFlip from 'react-hover-flip'
const Front = <h1>Front!</h1>
const Back = <h1>Back!</h1>
<ReactHoverFlip
front={Front}
back={Back}
direction="horizontal"
height={100}
width={100}
/>
Next.js usage
// YourComponent.tsx
import 'react-hover-flip/lib/esm/index.css' // import css
import dynamic from 'next/dynamic'
// Lazy load ReactHoverFlip as it is a pure react component
const ReactHoverFlip = dynamic(() => import('react-hover-flip/lib/esm/index-nostyle'), { ssr: false })
const YourComponent = () => {
const Front = <h1>Front!</h1>
const Back = <h1>Back!</h1>
return (
<ReactHoverFlip
front={Front}
back={Back}
direction="horizontal"
height={100}
width={100}
/>
)
}
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.