React Next Tilt

A Performant Customizable Tilt Component for React

Main Demo • Control Element Demo • Storybook

Table of Contents

• Features
• Installation
• Usage
• Props
• Events/Callbacks
• Ref
• Author
• License

Features

• Easy to use
• Zero dependencies
• Highly customizable
• Touch and Gyroscope support
• Two customizable glare effects (spot/line)
• Parallax ready
• "Scale on Hover/Touch" support
• "Shadow on Hover/Touch" support
• "Disable Scroll on Touch" support
• "Full-Page Listening" support
• "Control Element" support
• No jittery movement around the edges
• Built with performance in mind (requestAnimationFrame(), will-change, and other optimizations)
• Built from the ground up using React Hooks/TypeScript (is not a port of another library)
• Minimum amount of component re-renders
• Typed props with JSDoc descriptions
• Tested extensively using Cypress/Storybook

Installation

1$ npm install react-next-tilt

Once the package is installed, you can import the component:

1import { Tilt } from 'react-next-tilt';

Usage

Basic Usage

Place the element/component you want the tilt effect to be applied to inside of <Tilt></Tilt>.

1<Tilt>
2  <img src="path/to/image.jpg" />
3</Tilt>

You can place any element/component inside of <Tilt></Tilt> (doesn't have to be an image)

Parallax Effect

This component is "parallax ready", meaning you don't need to change any settings for it to work.

You just need to set up your parallax effect in JSX/CSS and place it inside of <Tilt></Tilt>

You can read this article to learn more about how to set up the 3D parallax effect.

⚠️ Setting lineGlareMixBlendMode and/or spotGlareMixBlendMode properties to anything other than "normal" will break the parallax effect.

Props

All props are optional.

In addition to these props, you can use any valid HTMLDivElement props like className='', data-...='...', onMouseMove={...} etc. they will be applied to the container element.

While you can tilt the component to a given angle by adjusting the initial angles, it will cause the component to re-render. It is advised to use the tilt() function exposed by the component's ref instead.

Events/Callbacks

Ref

The component's ref object contains these properties:

Ref functions don't re-render the component.

Ref Usage (ref function)

1import { Tilt } from 'react-next-tilt';
2
3const MyComponent = () => {
4  return (
5    <Tilt
6      ref={(ref) => {
7        if (ref) {
8          //do something with the ref
9        }
10      }}
11    >
12      ...
13    </Tilt>
14  );
15};

Ref Usage (useEffect)

1import { useRef, useEffect } from 'react';
2import { Tilt, TiltRef } from 'react-next-tilt';
3
4const MyComponent = () => {
5  const ref = useRef<TiltRef>(null);
6
7  useEffect(() => {
8    if (ref.current) {
9      //do something with the ref
10    }
11  }, []);
12
13  return <Tilt ref={ref}>...</Tilt>;
14};

Tilt on Mount

1import { useRef, useEffect } from 'react';
2import { Tilt, TiltRef } from 'react-next-tilt';
3
4const MyComponent = () => {
5  const ref = useRef<TiltRef | null>(null);
6
7  useEffect(()=>{
8    if (ref.current) {
9    //do something else with the ref
10    }
11  },[]);
12
13  return (
14    <Tilt
15      ref={(r) => {
16        if (r) {
17          console.log(`angle = ${JSON.stringify(r.angle())}`);
18          r.tilt({ angleX: 10, angleY: 10 });
19          console.log(`angle = ${JSON.stringify(r.angle())}`);
20          ref.current = r;
21        }
22      }}
23      ...
24    >
25      ...
26    </Tilt>
27  );
28};

Author

Rashid Shamloo (github.com/rashidshamloo)

License

MIT