arkyn
ChangelogGuides

ToastProvider

ToastProvider exposes toast notification actions and renders the global toaster container.

tsx

import { ToastProvider } from "@arkyn/components";

Basic Usage

tsx

<ToastProvider>
    <App />
</ToastProvider>

Triggering Toast Notifications

Use useToast() inside provider scope to show success and danger notifications.

tsx

function SaveAction() {
    const { showToast } = useToast();


    return (
        <button
            onClick={() =>
                showToast({
                    message: "Saved successfully",
                    type: "success",
                })
            }
        >
            Save
        </button>
    );
}

Toast Types

The provider supports two schemas with predefined visual styles.

tsx

showToast({ message: "Operation completed", type: "success" });
showToast({ message: "Something went wrong", type: "danger" });

Notes

Hook dependency
The useToast hook must be called inside ToastProvider. Outside provider scope, it throws an error.

Properties

children - ReactNode React subtree that can access toast context and toaster rendering.
On this page