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.