Toast

Overview

The Toast component is a versatile notification system that provides animated, customizable alerts. Built with Framer Motion, it supports multiple variants, animations, themes, and appearance styles, making it perfect for providing feedback in your applications.

Preview

Preview

Code

import { useToast } from './components/ui';
import { InfoCircledIcon } from "@radix-ui/react-icons";

function ToastDemo() {
  const toast = useToast();
  
  const showToast = () => {
    toast.addToast({
      message: "Hello from Toast!",
      variant: "info",
      animation: "slide",
      icon: <InfoCircledIcon className="w-5 h-5" />
    });
  };

  return (
    <button
      onClick={showToast}
      className="px-6 py-3 bg-primary text-white rounded-md hover:bg-primary/80 flex items-center justify-center gap-2"
    >
      <InfoCircledIcon className="w-5 h-5" />
      Show Toast
    </button>
  );
}

Installation

npm

npx @mindfiredigital/ignix-ui add toast

yarn

yarn @mindfiredigital/ignix-ui add toast

pnpm

pnpm @mindfiredigital/ignix-ui add toast

Usage

First, wrap your application with the ToastProvider:

import { ToastProvider } from './components/ui';

function App() {
  return (
    <ToastProvider>
      <YourApp />
    </ToastProvider>
  );
}

Then use the toast in your components:

import { useToast } from './components/ui';

function MyComponent() {
  const toast = useToast();
  
  const showNotification = () => {
    toast.addToast({
      message: "Operation successful!",
      variant: "success",
      animation: "slide",
      mode: "light",
      icon: <CheckCircledIcon />
    });
  };
  
  return <button onClick={showNotification}>Show Toast</button>;
}

Features

Preview

Code

toast.addToast({
  message: "Hello from Toast!",
  variant: "info",
  animation: "slide",
  appearance: "glow",
  icon: <InfoCircledIcon className="w-5 h-5" />
});