{"library":"react-popper","title":"React Popper","description":"react-popper is the official React wrapper library for Popper.js, a powerful positioning engine used to create tooltips, popovers, and other UI elements that need to be dynamically positioned relative to a reference element. It provides a declarative API for integrating Popper into React applications, abstracting away direct DOM manipulation. The current stable version is 2.3.0, which includes support for React 18. This library is actively maintained, with regular updates addressing bug fixes, TypeScript type improvements, and React version compatibility. Key differentiators include its tight integration with the highly optimized Popper.js core and a modern hook-based API (`usePopper`) introduced in v2.2.0, which simplifies complex positioning logic within functional components, offering a more idiomatic React experience compared to earlier render-prop patterns.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-popper"],"cli":null},"imports":["import { usePopper } from 'react-popper'","import { Popper } from 'react-popper'","import { Manager } from 'react-popper'","import { Reference } from 'react-popper'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react';\nimport { usePopper } from 'react-popper';\n\nfunction TooltipButton() {\n  const [referenceElement, setReferenceElement] = useState(null);\n  const [popperElement, setPopperElement] = useState(null);\n  const [arrowElement, setArrowElement] = useState(null);\n  const [isVisible, setIsVisible] = useState(false);\n\n  const { styles, attributes } = usePopper(referenceElement, popperElement, {\n    placement: 'right',\n    modifiers: [\n      { name: 'arrow', element: arrowElement },\n      { name: 'offset', options: { offset: [0, 8] } },\n    ],\n  });\n\n  return (\n    <>\n      <button\n        type=\"button\"\n        ref={setReferenceElement}\n        onMouseEnter={() => setIsVisible(true)}\n        onMouseLeave={() => setIsVisible(false)}\n        style={{ padding: '10px 20px', fontSize: '16px', cursor: 'pointer' }}\n      >\n        Hover Me\n      </button>\n\n      {isVisible && (\n        <div\n          ref={setPopperElement}\n          style={{ ...styles.popper, background: 'rgba(0,0,0,0.8)', color: 'white', padding: '5px 10px', borderRadius: '4px', zIndex: 1000 }}\n          {...attributes.popper}\n        >\n          This is a tooltip!\n          <div ref={setArrowElement} style={styles.arrow} />\n        </div>\n      )}\n    </>\n  );\n}\n\n// To render in a React app:\n// ReactDOM.render(<TooltipButton />, document.getElementById('root'));","lang":"typescript","description":"Demonstrates a basic tooltip implementation using the `usePopper` hook, including placement, offset, and an arrow modifier.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}