πŸ‘€ Easily apply tilt hover effect on React components - lightweight/zero dependencies

Overview

React Tilt

npm version npm downloads npm bundle size Build Status Codecov Coverage prettier TypeScript

πŸ‘€ Easily apply tilt hover effect on React components

Demo

Demos created with React DemoTab πŸ“‘

Install

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:

Example

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

const App = () => {
  return (
    <Tilt>
      <div style={{ height: '300px', backgroundColor: 'darkgreen' }}>
        <h1>React Parallax Tilt πŸ‘€</h1>
      </div>
    </Tilt>
  );
};

ReactDOM.render(<App />, 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