@mediamonks/use-popper

![npm](https://img.shields.io/npm/dt/@mediamonks/use-popper) ![npm](https://img.shields.io/npm/v/@mediamonks/use-popper) ![npm](https://img.shields.io/npm/l/@mediamonks/use-popper)

Usage no npm install needed!

<script type="module">
  import mediamonksUsePopper from 'https://cdn.skypack.dev/@mediamonks/use-popper';
</script>

README

Use Popper

npm npm npm

Installation

Note: React 16.8+ is required for Hooks.

With npm

npm i use-popper

Or with yarn

yarn add use-popper

Edit usePopper

import React from 'react';
import usePopper from 'use-popper';
import { useHover } from 'use-events';

function Tooltip(props) {
  const { reference, popper, arrow } = usePopper({ placement: 'bottom' });
  const [active, bind] = useHover();

  return (
    <div>
      <button ref={reference.ref} {...bind}>
        hover me
      </button>
      {active && (
        <div
          ref={popper.ref}
          style={popper.styles}
          data-placement={popper.placement}
        >
          <div>Hello!</div>
          <div ref={arrow.ref} style={arrow.styles} />
        </div>
      )}
    </div>
  );
}

export default Tooltip;