https://github.com/tanisha03/react-3d-hover
Tiny React Package for a smooth 3D Hover
https://github.com/tanisha03/react-3d-hover
3d-hover hover-effects microinteractions npm-package react tiny
Last synced: 9 months ago
JSON representation
Tiny React Package for a smooth 3D Hover
- Host: GitHub
- URL: https://github.com/tanisha03/react-3d-hover
- Owner: tanisha03
- Created: 2021-05-20T07:52:55.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2021-05-22T17:28:26.000Z (almost 5 years ago)
- Last Synced: 2025-06-03T20:29:47.524Z (11 months ago)
- Topics: 3d-hover, hover-effects, microinteractions, npm-package, react, tiny
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-3d-hover
- Size: 631 KB
- Stars: 5
- Watchers: 0
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-3d-hover
[![npm version][npm-badge]][npm-url]
[![npm bundle size][size-badge]][npm-url]
_"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](https://www.npmjs.com/package/react-3d-hover)
`npm i react-3d-hover`
## Usage
This component is imported and used like any standard React component
```jsx
import React from 'react';
import Hover from 'react-3d-hover';
const App = () => {
return (
);
};
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:**
```jsx
Hello World
```
## License
[MIT License](./LICENSE)
[npm-url]: https://www.npmjs.com/package/react-3d-hover
[license-url]: ./LICENSE
[npm-badge]: https://badge.fury.io/js/react-3d-hover.svg
[size-badge]: https://img.shields.io/bundlephobia/minzip/react-3d-hover.svg