vyrnReact+Next

Toast Library for React and Next.js

$npm i vyrn

Copied!

Test Toasts with Current Configuration (Click to show)

Position Configuration

Swipe Direction Configuration

Preview Configuration

Current Configuration:

<ClientToastProvider
  position="bottom-center"
  swipeDirection="left"
  maxToasts={5}
  layout="stack"
  showCloseButton={false}
  showProgressBar={true}
  color={true}
>
  {children}
</ClientToastProvider>

Implementation

1. Provider Setup

// In your root component
import { ToastProvider } from "vyrn";

export default function App() {
  return (
    <ToastProvider
      position="bottom-center"
      swipeDirection="left"
      maxToasts={5}
      layout="stack"
      showCloseButton={false}
      showProgressBar={true}
      color={true}
    >
      {/* Your app components */}
    </ToastProvider>
  );
}
typescript

2. Component Implementation

// Example component file (e.g., MyComponent.tsx)
import { useToast } from "vyrn";

export default function MyComponent() {
  const toast = useToast();

  const showToasts = () => {
    // Basic toasts
    toast.success("Success message");
    toast.error("Error message");
    toast.warning("Warning message");
    toast.info("Info message");

    // Custom styled toast
    toast.custom(
      <div className="font-bold">Custom styled toast</div>,
      {
        className: "bg-white text-black border-l-4 border-purple-500",
        duration: 5000
      }
    );

    // Complex toast with actions
    toast.custom(
      <div>
        <h3>Complex Toast</h3>
        <p>With actions and input</p>
      </div>,
      {
        className: "bg-gray-100 text-gray-800 border-l-4 border-blue-500",
        duration: 0,
        actions: [
          {
            label: "Action",
            onClick: () => console.log("Action clicked"),
            className: "bg-blue-500 text-white px-2 py-1 rounded"
          }
        ]
      }
    );
  };

  return (
    <button onClick={showToasts}>
      Show Toasts
    </button>
  );
}
typescript

Toast Library Documentation

Provider Configuration

Prop	Type	Default	Description
position	'top-left' \| 'top-center' \| 'top-right' \| 'bottom-left' \| 'bottom-center' \| 'bottom-right'	'bottom-center'	Position where toasts will appear
swipeDirection	'right' \| 'left' \| 'up' \| 'down'	'left'	Direction to swipe toast for dismissal
maxToasts	number	5	Maximum number of toasts shown simultaneously
layout	'stack' \| 'normal'	'stack'	How multiple toasts are displayed
showCloseButton	boolean	false	Whether to show close button on toasts
showProgressBar	boolean	true	Whether to show progress bar on toasts
color	boolean	true	Whether to show color on toasts

Toast Methods

Method	Arguments	Description
toast.success	(content, options?)	Shows success toast with green styling
toast.error	(content, options?)	Shows error toast with red styling
toast.warning	(content, options?)	Shows warning toast with yellow styling
toast.info	(content, options?)	Shows info toast with blue styling
toast.custom	(content, options?)	Shows custom styled toast

Toast Options

Option	Type	Default	Description
duration	number	5000	Duration in ms before auto-dismiss (0 for no auto-dismiss)
className	string	-	Custom CSS classes for toast
animation	'slide' \| 'fade' \| 'zoom'	'slide'	Toast appear/disappear animation