@mshafiqyajid/react-alert
Headless alert hook and styled component. Six tones, four variants, dismissible, and smooth enter/exit animations.
Playground #
Changes saved
Your changes have been saved successfully.
Attention required
Your subscription expires in 3 days.
Error
Failed to process your request. Please try again.
New feature
You can now export reports as PDF.
Alert title
This is the alert description.
Props
TSX
import { AlertStyled } from "@mshafiqyajid/react-alert/styled";
import "@mshafiqyajid/react-alert/styles.css";
<AlertStyled
title="Alert title"
description="This is the alert description."
/>Install #
npm install @mshafiqyajid/react-alertQuick start #
import { AlertStyled } from "@mshafiqyajid/react-alert/styled";
import "@mshafiqyajid/react-alert/styles.css";
<AlertStyled tone="success" title="Saved!" description="Your changes have been saved." />
<AlertStyled tone="danger" title="Error" description="Something went wrong." dismissible />
<AlertStyled tone="warning" variant="filled" title="Warning" description="Disk space is low." />Headless #
import { useAlert } from "@mshafiqyajid/react-alert";
function MyAlert() {
const { alertProps, dismissProps, isDismissed, dismiss } = useAlert({
dismissible: true,
tone: "danger",
onDismiss: () => console.log("dismissed"),
});
if (isDismissed) return null;
return (
<div {...alertProps} className="my-alert">
<span>Something went wrong.</span>
<button {...dismissProps}>×</button>
</div>
);
}API #
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "soft" | "filled" | "outline" | "banner" | "soft" | Visual style |
| tone | "neutral" | "primary" | "success" | "warning" | "danger" | "info" | "neutral" | Color tone |
| size | "sm" | "md" | "lg" | "md" | Size |
| title | ReactNode | — | Alert title |
| description | ReactNode | — | Alert body text |
| icon | ReactNode | — | Override default tone icon |
| showIcon | boolean | true | Show/hide the icon |
| dismissible | boolean | false | Show dismiss button; Escape also dismisses |
| onDismiss | () => void | — | Called when dismissed |
| action | ReactNode | — | Action button slot |
| children | ReactNode | — | Additional content |
| className | string | — | Extra class on root |
| style | CSSProperties | — | Inline style override |