react-universal-tilt

About

universal-tilt.js implementation for React component

Demo

Live check the website
Playground play with the library in Storybook

Alternatives

• react-tilt by Jon
• react-tilty by Jonah

How to Use

First, install the library in your project by npm:

$ npm install react-universal-tilt

Or Yarn:

$ yarn add react-universal-tilt

Getting Started

** Import plugin in the React application file:**

import ReactTilt from 'react-universal-tilt';

** Later, create a parallax component and pass options:**

<ReactTilt
  settings={/* settings */}
  callbacks={/* callbacks */}
  onTiltChange={/* event output destination */}
  className={/* class name(s) */}
  // other props for div tag e.g. style
/>

You can add components with or without additional content:

with:

<ReactTilt /* options */>
  {/* additional content */}
</ReactTilt>

without:

<ReactTilt /* options */ />

Props

Event

onTiltChange event callback will output the x, y & angle of tilting

Examples

import React from 'react';
import ReactTilt from 'react-universal-tilt';

/* ------ First Example ------ */

export const FirstExample = () => {
  return (
    <ReactTilt
      settings={{
        base: 'window',
        reverse: true,
      }}
      style={{
        border: '1px solid #333',
      }}
      className="tilt-elem my-tilt"
    />
  );
};

/* ------ Second Example ------ */

function myFunc(el) {
  el.style.backgroundColor = '#f00';
}

export const SecondExample = () => {
  const handleTiltChange = (e) => {
    console.log(e.tiltX, e.tiltY, e.angle);
  };

  const style = {
    border: '1px solid #333',
  };

  return (
    <ReactTilt
      settings={{
        speed: 500,
        scale: 1.3,
      }}
      callbacks={{
        onMouseMove: (el) => myFunc(el),
      }}
      style={style}
      className="tilt-elem my-tilt"
      onTiltChange={handleTiltChange}
    >
      <h3>Hello World!</h3>
    </ReactTilt>
  );
};

License

This project is licensed under the MIT License 2018-present Jakub Biesiada