@rhc-shared-components/alert-component

Toast alert component for Red Hat certified technology apps

Install

npm install --save @rhc-shared-components/alert-component

Usage

Wrap your app with AlertProvider, render AlertComponent once, then use the popup helpers to trigger alerts:

import {
  AlertComponent,
  AlertProvider,
  ErrorPopup,
  InfoPopup,
  SuccessPopup,
  WarningPopup,
  useAlertContext,
} from "@rhc-shared-components/alert-component";

const SubComponent = () => {
  const { setAlertState } = useAlertContext();
  return (
    <div>
      <button onClick={() => SuccessPopup(setAlertState, "Saved successfully")}>
        Success
      </button>
      <button onClick={() => ErrorPopup(setAlertState, "Something went wrong", "Please try again")}>
        Error
      </button>
      <button onClick={() => WarningPopup(setAlertState, "Proceed with caution")}>
        Warning
      </button>
      <button onClick={() => InfoPopup(setAlertState, "FYI")}>
        Info
      </button>
    </div>
  );
};

const App = () => {
  return (
    <AlertProvider>
      <AlertComponent />
      <SubComponent />
    </AlertProvider>
  );
};

Alerts auto-dismiss after 5 seconds.

Development

yarn dev      # Start dev server
yarn build    # Build library
yarn lint     # Check with Biome
yarn lint-fix # Auto-fix lint issues