use-3d-effect

React hook for 3D tilt card effect

Usage no npm install needed!

<script type="module">
  import use3dEffect from 'https://cdn.skypack.dev/use-3d-effect';
</script>

README

use-3d-effect

demo

Install

npm install --save use-3d-effect

Usage

import * as React from 'react'
import { animated } from 'react-spring';
import { use3dEffect } from 'use-3d-effect';

const Example = () => {
  const ref = React.useRef(null);
  const {style, ...mouseHandlers} = use3dEffect(ref);

  return (
    <animated.div
      ref={ref}
      style={{
        background: '#61dafb', color: 'white', padding: '2em',
        ...style
      }}
      {...mouseHandlers}
    >
      Hover over me!
    </animated.div>
  );
};

License

MIT © Hermanya

This hook is created using create-react-hook.