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: 12 days 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 (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-05-22T17:28:26.000Z (over 3 years ago)
• Last Synced: 2024-09-01T04:21:17.156Z (4 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: 1
• Forks: 1
• 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