Alert
Wrapper for the Bootstrap alert component.
Example Usage
import React from "react";
import {Alert} from "bs5-react-elements";
function ExampleUsage() {
return <div>
<Alert
role="alert"
className="alert alert-primary alert-dismissible fade show"
>
Lorem ipsum dolor.
<button
type="button"
className="btn-close"
data-bs-dismiss="alert"
aria-label="Close"></button>
</Alert>
</div>;
}
Important! If you are making your alert dismissable—which, otherwise you have no need to use this element—than you must wrap this element in another html element (notice the div in the example).
Otherwise, if you don't do this, when Bootstrap deletes the real dom element React would not be able to find the component! This is admittedly a workaround, and it's recommened you supply an onClosed
callback that completely and officially unmounts the component when the alert is dismissed.
Demos
There are no demos available for this element. Submit an issue or pull request on GitHub to add one.
Props
Name | Description | Type | Default Value | Since |
---|---|---|---|---|
onClosed | Handler for the closed.bs.alert event | func | 0.2.0 | |
onClose | Handler for the close.bs.alert event | func | 0.2.0 | |
component | React ref that will be assigned the component instance | React ref | 0.2.0 | |
children | Alert contents | node | 0.2.0 |