PUIAlert

A PUIAlert is a modal that can be displayed to the user with actions associated with it. You present an alert using the usePUIAlert hook and pass it an object that follows the PUIAlertConfig interface. Once you call the function returned by userPUIAlert an alert will be displayed to the user and added to the global state.

Note: Only one alert can be presented at a time. Using the hook while another PUIAlert is displaying will result in the current alert being dismissed and the new one being presented.

Example

import {PUIColor, usePUIAlert, usePUIAlertHide} from "./pstdl-ui";
import {ReactElement} from "react";

export function TestBed(): ReactElement {

	const aFunctionToMakeAnAlert = usePUIAlert();
	const hideAlert = usePUIAlertHide();

	return <div className={"TestBed"}>
		<button onClick={() => {
			aFunctionToMakeAnAlert({
				title: "Hello pstdl-ui!",
				message: "A PUIAlert is a simple modal that takes some text and actions.",
				actions: [
					{
						text: "Abort",
						color: PUIColor.red,
						onClick: () => {
							console.log("AHH!")
						}
					},
					{
						text: "Ok",
						onClick: hideAlert
					}
				]
			})
		}}>Click Me!</button>
	</div>
}