Skip to main content

ToastContainer

The rendering target for the library's global toast notification queue. Mount it once near the root of your application. Toasts are dispatched from anywhere using the useToast hook.

📖 Storybook

Preview​

Live preview↗ Open in Storybook

Import​

import { ToastContainer } from "@xocialive/ui-components";
import { useToast } from "@xocialive/ui-components/hooks";

Setup​

Mount ToastContainer inside AppProvider (or inside the Redux Provider if composing manually):

App.tsx
import { ToastContainer } from "@xocialive/ui-components";

function App() {
  return (
    <>
      <Router>
        <Routes />
      </Router>
      <ToastContainer />
    </>
  );
}

Dispatching toasts​

import { useToast } from "@xocialive/ui-components/hooks";

function SaveButton() {
  const toast = useToast();

  const handleSave = async () => {
    try {
      await saveData();
      toast.success("Saved successfully");
    } catch {
      toast.error("Failed to save");
    }
  };

  return <Button onClick={handleSave}>Save</Button>;
}

Props​

PropTypeDefaultDescription
position"top-right" | "top-left" | "bottom-right" | "bottom-left" | "top-center" | "bottom-center""top-right"Where toasts appear on screen
maxVisiblenumber3Maximum toasts shown simultaneously
autoHideDurationnumber4000Auto-dismiss delay in milliseconds

See also​

  • useToast — hook for dispatching toasts