React Tilt

[![npm version][npm-badge]][npm-url]
[![npm downloads][downloads-badge]][npm-url]
[![npm bundle size][size-badge]][npm-url]
[![Build Status][build-badge]][build-url]
[![Codecov Coverage][coverage-badge]][coverage-url]
[![prettier][prettier-badge]][prettier-url]
[![TypeScript][typescript-badge]][typescript-url]

_👀 Easily apply tilt hover effect on React components_


Demo

Demos created with React DemoTab 📑

Install

``bash
npm install react-parallax-tilt
`

Features

- Lightweight (3.8kB), zero dependencies 📦
- Supports mouse and touch events
- Support for device tilting (gyroscope)
- Glare effect 🌟 with custom props (color, position,...) 🔗demo
- Events to keep track of component values 📐 (tilt, glare, mousemove,...) 🔗demo
- Many effects and functionalities that can be easily applied:
- scale on hover 🔗demo
- disable x/y axis 🔗demo
- flip component vertically/horizontally 🔗demo
- tilt hover effect on the whole window 🔗demo
- tilt component with custom manual input 🕹 (joystick, slider etc.) 🔗demo
- parallax effect on overlaid images 🔗demo

Example

`jsx
import React from 'react';
import ReactDOM from 'react-dom';
import Tilt from 'react-parallax-tilt';

const App = () => {
return (



ReactDOM.render(, document.getElementById('root'));
`

Props

All of the props are optional.
Below is the complete list of possible props and their options:

> ▶︎ indicates the default value if there's one

tiltEnable: _boolean_ ▶︎ true
Boolean to enable/disable tilt effect.

tiltReverse: _boolean_ ▶︎ false
Reverse the tilt direction.

tiltAngleXInitial: _number_ ▶︎ 0
Initial tilt value (degrees) on x axis.

tiltAngleYInitial: _number_ ▶︎ 0
Initial tilt value (degrees) on y axis.

tiltMaxAngleX: _number_ ▶︎ 20
Range: 0 - 90
Max tilt rotation (degrees) on x axis.

tiltMaxAngleY: _number_ ▶︎ 20
Range: 0 - 90
Max tilt rotation (degrees) on y axis.

tiltAxis: _Axis | null_ ▶︎ null
_Axis = 'x' | 'y'_
Which axis should be enabled. If null both are enabled.

tiltAngleXManual: _number_ | null} ▶︎ null
Manual tilt rotation (degrees) on x axis.

tiltAngleYManual: _number_ | null} ▶︎ null
Manual tilt rotation (degrees) on y axis.

glareEnable: _boolean_ ▶︎ false
Boolean to enable/disable glare effect.

glareMaxOpacity: _number_ ▶︎ 0.7
Range: 0 - 1
The maximum glare opacity (0.5 = 50%, 1 = 100%, etc.).

glareColor: _string_ ▶︎ #ffffff
Set color of glare effect.

glareBorderRadius: _string_ ▶︎ 0
Accepts any standard CSS border radius.
Useful if the glare color is different to the page color.

glarePosition: _GlarePosition_ ▶︎ bottom
_GlarePosition = 'top' | 'right' | 'bottom' | 'left' | 'all'_
Set position of glare effect.

glareReverse: _boolean_ ▶︎ false
Reverse the glare direction.

scale: _number_ ▶︎ 1
Scale of the component (1.5 = 150%, 2 = 200%, etc.).

perspective: _number_ ▶︎ 1000
The perspective property defines how far the object (wrapped/child component) is away from the user.
The lower the more extreme the tilt gets.

flipVertically: _boolean_ ▶︎ false
Boolean to enable/disable vertical flip of component.

flipHorizontally: _boolean_ ▶︎ false
Boolean to enable/disable horizontal flip of component.

reset: _boolean_ ▶︎ true
If the effects has to be reset on onLeave event.

transitionEasing: _string_ ▶︎ cubic-bezier(.03,.98,.52,.99)
Easing of the transition when manipulating the component.

transitionSpeed: _number_ ▶︎ 400
Speed of the transition when manipulating the component.

trackOnWindow: _boolean_ ▶︎ false
Track mouse and touch events on the whole window.

gyroscope: _boolean_ ▶︎ false
Boolean to enable/disable device orientation detection.

onMove: _Function_ => (tiltAngleX: _number_, tiltAngleY: _number_, tiltAngleXPercentage: _number_, tiltAngleYPercentage: _number_, glareAngle: _number_, glareOpacity: _number_, eventType: _string | null_)
Gets triggered when user moves on the component.

onEnter: _Function_ => (eventType: _string | null_)
Gets triggered when user enters the component.

onLeave: _Function_ => (eventType: _string | null_)
Gets triggered when user leaves the component.

Gyroscope - Device Orientation

Please keep in mind that detecting device orientation is currently experimental technology.
Check the browser compatibility before using this in production.
A few takeaways when using device orientation event:

- always use secure origins (such as https)
- it doesn't work in all browsers when using it in cross-origin