Skip to content
🃏React hook that adds the 3D tilt card effect to any component.
TypeScript HTML CSS JavaScript
Branch: master
Clone or download
Latest commit 962bd9a Mar 12, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example depend on the resizeObeserver polyfill Mar 12, 2019
src
.editorconfig init create-react-hook@2.7.1 Mar 11, 2019
.gitignore
.travis.yml init create-react-hook@2.7.1 Mar 11, 2019
README.md
package.json
rollup.config.js init create-react-hook@2.7.1 Mar 11, 2019
tsconfig.json init create-react-hook@2.7.1 Mar 11, 2019
tsconfig.test.json init create-react-hook@2.7.1 Mar 11, 2019
yarn.lock initial commit Mar 11, 2019

README.md

use-3d-effect

NPM JavaScript Style Guide

screencast

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.

You can’t perform that action at this time.