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