@mediamonks/use-popper
v1.1.11
Published
![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)
Downloads
16
Keywords
Readme
Use Popper
Installation
Note: React 16.8+ is required for Hooks.
With npm
npm i use-popper
Or with yarn
yarn add use-popper
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;