https://github.com/floating-ui/react-popper

🍿⚛Official React library to use Popper, the positioning library
https://github.com/floating-ui/react-popper

placement popover popper react tooltip tooltips

Last synced: about 1 month ago
JSON representation

🍿⚛Official React library to use Popper, the positioning library

• Host: GitHub
• URL: https://github.com/floating-ui/react-popper
• Owner: floating-ui
• License: mit
• Created: 2016-10-07T02:51:11.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2023-06-05T21:30:24.000Z (over 1 year ago)
• Last Synced: 2024-05-01T11:39:14.420Z (4 months ago)
• Topics: placement, popover, popper, react, tooltip, tooltips
• Language: JavaScript
• Homepage: https://popper.js.org/react-popper/
• Size: 3.57 MB
• Stars: 2,488
• Watchers: 18
• Forks: 227
• Open Issues: 40
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome - floating-ui/react-popper - 🍿⚛Official React library to use Popper, the positioning library (JavaScript)
• best-of-react - GitHub - 13% open · ⏱️ 08.05.2024): (Layout)

README

        
# React Popper

[![Unit Tests](https://github.com/popperjs/react-popper/workflows/Unit%20Tests/badge.svg)](https://github.com/popperjs/react-popper/actions?query=workflow%3A%22Unit+Tests%22)

[![npm version](https://img.shields.io/npm/v/react-popper.svg)](https://www.npmjs.com/package/react-popper)

[![npm downloads](https://img.shields.io/npm/dm/react-popper.svg)](https://www.npmjs.com/package/react-popper)

[![Dependency Status](https://david-dm.org/souporserious/react-popper.svg)](https://david-dm.org/souporserious/react-popper)

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

[![Get support or discuss](https://img.shields.io/badge/chat-on_spectrum-6833F9.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyBpZD0iTGl2ZWxsb18xIiBkYXRhLW5hbWU9IkxpdmVsbG8gMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTAgOCI%2BPGRlZnM%2BPHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fTwvc3R5bGU%2BPC9kZWZzPjx0aXRsZT5zcGVjdHJ1bTwvdGl0bGU%2BPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNSwwQy40MiwwLDAsLjYzLDAsMy4zNGMwLDEuODQuMTksMi43MiwxLjc0LDMuMWgwVjcuNThhLjQ0LjQ0LDAsMCwwLC42OC4zNUw0LjM1LDYuNjlINWM0LjU4LDAsNS0uNjMsNS0zLjM1UzkuNTgsMCw1LDBaTTIuODMsNC4xOGEuNjMuNjMsMCwxLDEsLjY1LS42M0EuNjQuNjQsMCwwLDEsMi44Myw0LjE4Wk01LDQuMThhLjYzLjYzLDAsMSwxLC42NS0uNjNBLjY0LjY0LDAsMCwxLDUsNC4xOFptMi4xNywwYS42My42MywwLDEsMSwuNjUtLjYzQS42NC42NCwwLDAsMSw3LjE3LDQuMThaIi8%2BPC9zdmc%2B)](https://spectrum.chat/popper-js/react-popper)

React wrapper around [Popper](https://popper.js.org).

---

## ⚠️ This library is in maintenance mode!

This library wraps `@popperjs/core`, not `@floating-ui/dom`.

To use the new Floating UI package with React, instead visit https://floating-ui.com/docs/react-dom. 

---

## Install

Via package managers:

```bash

# With npm

npm i react-popper @popperjs/core

# With Yarn

yarn add react-popper @popperjs/core

```

**Note:** `@popperjs/core` must be installed in your project in order for

`react-popper` to work.

Via `script` tag (UMD library exposed as `ReactPopper`):

```html

```

## Documentation

The full documentation can be found on the official Popper website:

http://popper.js.org/react-popper

## Running Locally

#### clone repo

`git clone [email protected]:popperjs/react-popper.git`

#### move into folder

`cd ~/react-popper`

#### install dependencies

`npm install` or `yarn`

#### run dev mode

`npm run demo:dev` or `yarn demo:dev`

#### open your browser and visit:

`http://localhost:1234/`