use-boop

Extended react hook for Josh Comeau's boop effect

Usage no npm install needed!

<script type="module">
  import useBoop from 'https://cdn.skypack.dev/use-boop';
</script>

README

use-boop

Extended react hook for Josh Comeau's boop effect

NPM

Install

npm install --save react-spring use-boop

Usage

import useBoop from 'use-boop';
import { animated } from 'react-spring';

const SomeComponent = () => {
  const [style, trigger] = useBoop({ rotation: 45 });

  return (
    <animated.div style={style} onMouseEnter={trigger}>
      {/* Child can be anything */}
      <AiOutlineQuestionCircle size={80} />
    </animated.div>
  );
};