@gluestack-ui/popover
v0.1.43
Published
A universal headless Popover component for React Native, Next.js & React
Downloads
69,547
Readme
@gluestack-ui/popover
Installation
To use @gluestack-ui/popover
, all you need to do is install the
@gluestack-ui/popover
package:
$ yarn add @gluestack-ui/popover
# or
$ 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:
import { createPopover } from '@gluestack-ui/popover';
import { styled } from '../styled';
import {
Root,
Arrow,
Content,
Header,
Footer,
Body,
Backdrop,
CloseButton,
} from './styled-components';
export const Popover = createPopover({
Root,
Arrow,
Content,
Header,
Footer,
Body,
Backdrop,
CloseButton,
//@ts-ignore
AnimatePresence: styled.Component,
});
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.
// import the styles
import {
Root,
Arrow,
Content,
Header,
Footer,
Body,
Backdrop,
CloseButton,
} from '../components/core/popover/styled-components';
// import the createPopover function
import { createPopover } from '@gluestack-ui/popover';
// Understanding the API
export const Popover = createPopover({
Root,
Arrow,
Content,
Header,
Footer,
Body,
Backdrop,
CloseButton,
});
// Using the popover component
export default () => (
<Popover>
<PopoverBackdrop />
<PopoverContent>
<PopoverHeader>
<PopoverCloseButton />
</PopoverHeader>
<PopoverBody />
<PopoverFooter />
</PopoverContent>
</Popover>
);
More guides on how to get started are available here