@gluestack-ui/alert
v0.1.16
Published
A universal headless Alert component for React Native, Next.js & React
Downloads
72,373
Readme
@gluestack-ui/alert
Installation
To use @gluestack-ui/alert
, all you need to do is install the
@gluestack-ui/alert
package:
$ yarn add @gluestack-ui/alert
# or
$ npm i @gluestack-ui/alert
Usage
Alerts are used to communicate the status of a system, feature, or page. They indicate a specific state that may require attention from the user. Here's an example how to use this package to create one:
import { createAlert } from '@gluestack-ui/alert';
import { Root, Text, Icon } from './styled-components';
export const Alert = createAlert({
Root,
Text,
Icon,
});
Customizing the Alert:
Default styling of all these components can be found in the components/core/alert file. For reference, you can view the source code of the styled Alert
components.
// import the styles
import { Root, Text, Icon } from '../components/core/alert/styled-components';
// Understanding the API
const Alert: any = Root;
AlertIcon = Icon;
AlertText = Text;
// Using the alert component
export default () => (
<Alert>
<AlertIcon />
<AlertText />
</Alert>
);
More guides on how to get started are available here