useAlertControls Hook

The useAlertControls hook allows you to create and remove alerts in the DOM. It is particularly useful to inform the user about events in your application.

Usage

To use the useAlertControls hook, you need to enable the alertsPlugin in the plugins array of the BetterHtmlProvider.

Create alert

import { useAlertControls, Div } from "react-better-html";

function App() {
   const alertControls = useAlertControls();

   return (
      <>
         <Button
            text="Info alert"
            onClick={() => {
               alertControls.createAlert({
                  type: "info",
                  message: "Lorem ipsum"
               });
            }}
         />
      </>
   );
}

In the above example when clicking of the button an alert will appear.

Remove alert

import { useAlertControls, Div } from "react-better-html";

function App() {
   const alertControls = useAlertControls();

   return (
      <>
         <Button
            text="Remove alert"
            onClick={() => {
               alertControls.removeAlert("3cd80fd4-d782-4f5c-8c32-1dadf20fea83");
            }}
         />
      </>
   );
}

In the above example when clicking of the button the alert with id 3cd80fd4-d782-4f5c-8c32-1dadf20fea83 will disappear.

The id of an alert can be obtained from the return value of alertControls.createAlert (as referenced in the Return Value section)

Return Value

The hook returns an object with the following properties:

{
   createAlert: (alert: OmitProps<Alert, "id">) => Alert;
   removeAlert: (alertId: string) => void;
}

To see what is the Alert type, check the Alert section.

Notes

• The useAlertControls hook must be used within a react component.