A universal headless alert-dialog component for React Native, Next.js & React
npm install @gluestack-ui/alert-dialog@gluestack-ui/alert-dialogAlertDialog effectively interrupts a user's flow and prompts them to take a specific action. It's commonly used for mandatory confirmations or call-to-actions.
To install the component, run the following command in your terminal. This will add the component to your project's dependencies and allow you to use it in your project.
``sh`
npx gluestack-ui@latest add alert-dialog
Default styling of all these components can be found in the components/core/Default styling of all these components can be found in the components/core/alert-dialog file. For reference, you can view the source code of the styled AlertDialog components.
`jsx
// import the styles
import {
Root,
Content,
CloseButton,
Header,
Footer,
Body,
Backdrop,
} from '../components/core/alert-dialog/styled-components';
// import the createAlertDialog function
import { createAlertDialog } from '@gluestack-ui/alert-dialog';
// Understanding the API
const AlertDialog = createAlertDialog({
Root,
Content,
CloseButton,
Header,
Footer,
Body,
Backdrop,
});
// Using the alert-dialog component
export default () => (
);
``
More guides on how to get started are available
here.