@gluestack-ui/popover

Installation

To use @gluestack-ui/popover, all you need to do is install the @gluestack-ui/popover package:

1$ yarn add @gluestack-ui/popover
2
3# or
4
5$ npm i @gluestack-ui/popover

Usage

Popovers often provide contextual information or quick access to related actions without requiring the user to navigate to a different page or view. Here's an example how to use this package to create one:

1import { createPopover } from '@gluestack-ui/popover';
2import { styled } from '../styled';
3import {
4  Root,
5  Arrow,
6  Content,
7  Header,
8  Footer,
9  Body,
10  Backdrop,
11  CloseButton,
12} from './styled-components';
13
14export const Popover = createPopover({
15  Root,
16  Arrow,
17  Content,
18  Header,
19  Footer,
20  Body,
21  Backdrop,
22  CloseButton,
23  //@ts-ignore
24  AnimatePresence: styled.Component,
25});

Customizing the Popover:

Default styling of all these components can be found in the components/core/popover file. For reference, you can view the source code of the styled Popover components.

1// import the styles
2
3import {
4  Root,
5  Arrow,
6  Content,
7  Header,
8  Footer,
9  Body,
10  Backdrop,
11  CloseButton,
12} from '../components/core/popover/styled-components';
13
14// import the createPopover function
15import { createPopover } from '@gluestack-ui/popover';
16
17// Understanding the API
18export const Popover = createPopover({
19  Root,
20  Arrow,
21  Content,
22  Header,
23  Footer,
24  Body,
25  Backdrop,
26  CloseButton,
27});
28
29// Using the popover component
30export default () => (
31  <Popover>
32    <PopoverBackdrop />
33    <PopoverContent>
34      <PopoverHeader>
35        <PopoverCloseButton />
36      </PopoverHeader>
37      <PopoverBody />
38      <PopoverFooter />
39    </PopoverContent>
40  </Popover>
41);

More guides on how to get started are available here