Alert messages are used for user interaction.
import { PAlert } from 'pearkit';Here is an alert component that you can use in your projects.
const [alertStatus, setAlertStatus] = useState(false);
<PAlert status={alertStatus} close={() => setAlertStatus(false)} message="Lorem Ipsum..."/>Alert comes in 4 different types. info comes by default. The other three are danger, warning and success types.
<PAlert type="success" />Thanks to the closable feature, you can control whether the alert can be closed. You can use it to show fixed message.
<PAlert status={true} closable={false} />Here, we can enable the alert component to be closed automatically with the lifetime feature. However, since the state is outside, it still needs the close and status props. Because the lifetime feature triggers the close feature of the component. It also controls the closable feature.
<PAlert lifetime={3000} status={alertStatus} close={() => setAlertStatus(false)} />None
Here you can see all the working features for the alert component.
| Name | Type | Default | Description |
|---|---|---|---|
| type | AlertType | success | info | danger | warning | info | Type of the component |
| status | boolean | true | false | false | Status state of the component |
| message | string | null | Message of the component |
| close | function | void | Close function of the component |
| closable | boolean | true | false | true | Closable status state of the component |
| lifetime | number | undefined | Lifetime property of the component |