Making a tilt-on-hover effect in React JS without CSS

Example

First download the react-parallax-tilt package −

npm i --save react-parallax-tilt

This library is used to import the container which will add tilt effect to any element.

Add the following lines of code in App.js −

import Tilt from "react-parallax-tilt";

function App() {
   return (
      <Tilt>
         <div style={{ height: "300px", backgroundColor: "darkgreen"}}>
            <h1>React Parallax Tilt</h1>
         </div>
      </Tilt>
   );
}

export default App;

We can use the object to add a tilt effect on any element, whether it is card or div. and even button or list.

Output

On execution, it will produce the following output −