use-popper
TypeScript icon, indicating that this package has built-in type declarations

1.1.6 • Public • Published

Use Popper

npm npm NpmLicense

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;

Readme

Keywords

none

Package Sidebar

Install

npm i use-popper

Weekly Downloads

3,983

Version

1.1.6

License

MIT

Unpacked Size

17.6 kB

Total Files

10

Last publish

Collaborators

  • alexsandiyarov