"A tiny package to hover smooth as butter for React"
This package uses hooks internally so it has a requirement of React version 16.8 or above.
This package is hosted on npm
npm i react-3d-hover
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;Here is a list of available options with their defaults:
| Props | Default | Description |
|---|---|---|
| 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 | multiply size on hover: 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>