react-popper 's direct dependencies. Data on all dependencies, including transitive ones, is available via CSV download.| Name | Version | Size | License | Type | Vulnerabilities |
|---|---|---|---|---|---|
| @babel/runtime | 7.24.5 | 256.12 kB | MIT | prod | |
| create-react-context | 0.3.0 | 4.72 kB | MIT | prod | 1 |
| deep-equal | 1.1.2 | 20.09 kB | MIT | prod | |
| popper.js | 1.16.1 | 469.77 kB | MIT | prod | 1 |
| prop-types | 15.8.1 | 22.12 kB | MIT | prod peer | |
| react | 16.14.0 | 59.16 kB | MIT | prod peer | 1 |
| typed-styles | 0.0.7 | 9.28 kB | MIT | prod | 1 |
| warning | 4.0.3 | 3.66 kB | MIT | prod |
React-Popper is a wrapper for the Popper.js library specifically designed for React projects. Popper is not a tooltip library, but a positioning engine that developers can use to build features such as tooltips. This wrapper is perfect for those looking to position or align certain elements on a webpage in response to other elements, commonly used for creating pop-ups, drop-down menus, and more sophisticated positioning use-cases.
To use react-popper, you need to install it and its core dependency in your project using a package manager like npm or Yarn. Here's how you can do it:
Using npm:
npm i react-popper @popperjs/core
Or using Yarn:
yarn add react-popper @popperjs/core
React-Popper can also be included in your project using a script tag:
<script src="https://unpkg.com/react-popper/dist/index.umd.js"></script>
After the installation, you can simply import react-popper into your component file and use it as required.
The full documentation for React-Popper is available on the official Popper website at http://popper.js.org/react-popper. The comprehensive documentation guides you through all the functionalities and use-cases of React-Popper, providing you with everything you need to know about this powerful positioning engine. Whether you are just starting out or looking for advanced features, the documentation has got you covered.
