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:

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>

License

MIT License