An open API service indexing awesome lists of open source software.

https://github.com/imp-dance/native-popover-react


https://github.com/imp-dance/native-popover-react

Last synced: 3 months ago
JSON representation

Awesome Lists containing this project

README

        

# native-popover-react

> Utilize the [native web Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) in React

```tsx
import { NativePopover } from "native-popover-react";

function App() {
return (
(
Open tooltip
)}
popover={(props) => (


Popover content

)}
/>
);
}
```

## Controls

```tsx
import {
NativePopover,
usePopoverControls,
} from "native-popover-react";

function App() {
const popover = usePopoverControls();

return (



{popover.isOpen ? "Close popover" : "Open popover"}

(

Popover content

)}
/>

);
}
```

### Closing popover

You can close the popover using `usePopoverControls`, or by utilizing the second argument in the `popover` prop to create a close button:

```tsx
Toggle}
popover={(props, closeProps) => (


Popover content
X

)}
/>
```

## Anchoring

> [!WARNING]
> **Experimental**: This might not be supported in all modern browsers yet.

Enable an [anchor](https://developer.chrome.com/blog/introducing-popover-api#anchor_positioning) between `trigger` and `popover`.

```tsx
import { NativePopover } from "native-popover-react";

function App() {
return (


Toggle}
popover={(props) => (
Popover content

)}
/>

);
}
```