https://github.com/sandiiarov/use-popper

https://github.com/sandiiarov/use-popper

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/sandiiarov/use-popper
• Owner: sandiiarov
• Archived: true
• Created: 2019-03-23T04:02:25.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2020-07-10T15:40:15.000Z (about 4 years ago)
• Last Synced: 2024-04-18T12:05:02.182Z (5 months ago)
• Language: TypeScript
• Size: 765 KB
• Stars: 37
• Watchers: 1
• Forks: 10
• Open Issues: 7
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• fucking-awesome-react-hooks - `use-popper`
• awesome-react-hooks-cn - `use-popper`
• awesome-react-hooks - `use-popper`
• awesome-react-hooks - `use-popper`

README

        
# Use Popper

![npm](https://img.shields.io/npm/dt/use-popper.svg)

![npm](https://img.shields.io/npm/v/use-popper.svg)

![NpmLicense](https://img.shields.io/npm/l/use-popper.svg)

## Installation

> Note: React 16.8+ is required for Hooks.

### With npm

```sh

npm i use-popper

```

### Or with yarn

```sh

yarn add use-popper

```

[![Edit usePopper](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/ww293zr265?fontsize=14)

```js

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 (

    


      

        hover me

      

      {active && (

        


          
Hello!

          


        

      )}

    

  );

}


export default Tooltip;

```