Toast

💡 Make sure you add the <Toaster /> provider to your app first.

1. Import the toast function:

import { toast } from '@pheralb/toast';

2. Render a toast:

• toast.variant: Show a toast with a specific variant:

• toast.variant with action: Show a Action button and execute a custom function when clicked:

toast.default({
  text: `A toast with 👀 action button`,
  action: {
    label: 'Action', // Button label
    onClick: () => {
      // Do something
    },
  },
});

• toast.loading: Show a toast with loading state and will update automatically after the promise resolves or fails:

toast.loading({
  // Initial message:
  text: 'Loading',
  options: {
    promise: yourFunction(),
    success: 'Ready',
    error: 'Error',
    // Close toast automatically (the duration depends by delayDuration property):
    autoDismiss: true,
    // Optional:
    onSuccess: () => {
      console.log('Success');
    },
    // Optional:
    onError: () => {
      console.log('Error');
    },
  },
});

✨ For example, you can use Next.js Server Actions to show a loading toast while fetching data from an API:

// 📃 actions/testAction.ts
'use server';

export const testAction = async (name: string) => {
  await new Promise((resolve) => setTimeout(resolve, 1000));
  return {
    name: `Hello, ${name}!`,
  };
};

// 📃 components/Example.tsx

import { testAction } from '@/actions/testAction';
import { toast } from '@pheralb/toast';

toast.loading({
  text: 'Getting data',
  options: {
    promise: testAction(),
    success: 'Ready',
    error: 'Error',
    autoDismiss: false,
    onSuccess: (data) => {
      console.log(`Success: ${data.name}`);
      // Success: Hello, pheralb!
    },
  },
});

API Reference

The toast.variant function accepts the following options: