@radix-ui/react-popper

What is @radix-ui/react-popper?

@radix-ui/react-popper is a React component library that provides a set of primitives for creating popper elements, such as tooltips, dropdowns, and other floating elements. It leverages the Popper.js library to handle positioning and provides a highly customizable and accessible API.

What are @radix-ui/react-popper's main functionalities?

Basic Popper

This example demonstrates a basic popper setup with an anchor element and a popper content element.

```jsx
import { Popper } from '@radix-ui/react-popper';

function BasicPopper() {
  return (
    <Popper>
      <Popper.Anchor>
        <button>Anchor</button>
      </Popper.Anchor>
      <Popper.Content>
        <div>Popper Content</div>
      </Popper.Content>
    </Popper>
  );
}
```

Custom Positioning

This example shows how to customize the positioning of the popper content relative to the anchor element by setting the `placement` prop.

```jsx
import { Popper } from '@radix-ui/react-popper';

function CustomPositioningPopper() {
  return (
    <Popper placement="right">
      <Popper.Anchor>
        <button>Anchor</button>
      </Popper.Anchor>
      <Popper.Content>
        <div>Popper Content</div>
      </Popper.Content>
    </Popper>
  );
}
```

Transition Effects

This example demonstrates how to add transition effects to the popper content by controlling the `open` state and using CSS for animations.

```jsx
import { Popper } from '@radix-ui/react-popper';
import { useState } from 'react';

function TransitionPopper() {
  const [open, setOpen] = useState(false);

  return (
    <Popper open={open} onOpenChange={setOpen}>
      <Popper.Anchor>
        <button onClick={() => setOpen(!open)}>Toggle Popper</button>
      </Popper.Anchor>
      <Popper.Content>
        <div className="popper-content">Popper Content</div>
      </Popper.Content>
    </Popper>
  );
}
```

Other packages similar to @radix-ui/react-popper

react-popper

react-popper is a React wrapper around Popper.js, providing a set of components to create popper elements. It is similar to @radix-ui/react-popper but offers a more direct integration with Popper.js, making it a good choice for developers who need fine-grained control over popper behavior.

react-tooltip

react-tooltip is a library specifically designed for creating tooltips in React applications. While it focuses on tooltips, it provides a simpler API compared to @radix-ui/react-popper, making it easier to use for basic tooltip functionality.

README

react-popper

Installation

$ yarn add @radix-ui/react-popper
# or
$ npm install @radix-ui/react-popper

Usage

This is an internal utility, not intended for public usage.