1.1.1 • Published 3 years ago
react-3d-hover v1.1.1
react-3d-hover
"A tiny package to hover smooth as butter for React"
Requirements
This package uses hooks internally so it has a requirement of React version 16.8 or above.
Installation
This package is hosted on npm
npm i react-3d-hover
Usage
This component is imported and used like any standard React component
import React from 'react';
import Hover from 'react-3d-hover';
const App = () => {
return (
<div class="App">
<Hover></Hover>
</div>
);
};
export default App;
Props
Here is a list of available options with their defaults:
style: {} // A jsx style object that will be applied to the root element
max: 10 // Max tilt rotation (degrees)
perspective: 1000 // Transform perspective, the lower the more extreme the tilt gets.
scale: 1 // 2 = 200%, 1.5 = 150%, etc..
speed: 400 // Speed of the enter/exit transition
easing: "cubic-bezier(.03,.98,.52,.99)", // Easing on enter/exit
onMouseEnter: (e) => {} // A callback function for the mouse enter event
onMouseMove: (e) => {} // A callback function for the mouse move event
onMouseLeave: (e) => {} // A callback function for the mouse leave event
Example:
<Hover scale={1.2} perspective={900} speed={500}>
<div>Hello World</div>
</Hover>