Bunt-Toast

A lightweight, customizable toast notification library for React and Vue.

Features

• Framework Support: Works with both React and Vue.
• Customizable: Position toasts, set durations, and choose themes (light, dark, auto).
• Lightweight: Minimal footprint with zero dependencies.
• TypeScript Support: Fully typed.
• Zero Dependencies - No bloat, just what you need.

Demo

Check out the live demo to see Bunt-Toast in action.

Installation

npm install bunt-toast

Usage

The simplest way to use Bunt Toast is with the toast function API. Here are examples for both React and Vue.

React

import { toast } from 'bunt-toast/react';

function App() {
  const showToast = () => {
    // Show a success toast with default options
    toast.success('Operation successful!');
    
    // Or show an error toast
    toast.error('Something went wrong!');
    
    // Or an info toast
    toast.info('This is an informational message');
  };

  return <button onClick={showToast}>Show Toast</button>;
}

Vue

<template>
  <button @click="showToast">Show Toast</button>
</template>

<script>
import { toast } from 'bunt-toast/vue';

export default {
  methods: {
    showToast() {
      // Show a success toast with default options
      toast.success('Operation successful!');
      
      // Or show an error toast
      toast.error('Something went wrong!');
      
      // Or an info toast
      toast.info('This is an informational message');
    }
  }
}
</script>

Customization

You can customize the toast by providing additional options.

React

import { toast } from 'bunt-toast/react';

function App() {
  const showCustomToast = () => {
    toast.success('Operation successful!', {
      position: 'top-right', // 'top-right', 'top-left', 'bottom-right', 'bottom-left'
      duration: 5000, // Duration in milliseconds
      theme: 'dark', // 'light' or 'dark'
    });
  };

  return <button onClick={showCustomToast}>Show Custom Toast</button>;
}

Vue

<template>
  <button @click="showCustomToast">Show Custom Toast</button>
</template>

<script>
import { toast } from 'bunt-toast/vue';

export default {
  methods: {
    showCustomToast() {
      toast.success('Operation successful!', {
        position: 'top-right', // 'top-right', 'top-left', 'bottom-right', 'bottom-left'
        duration: 5000, // Duration in milliseconds
        theme: 'dark', // 'light' or 'dark'
      });
    }
  }
}
</script>

Advanced Usage

For more control, you can use the show method directly.

React

import { toast } from 'bunt-toast/react';

function App() {
  const showAdvancedToast = () => {
    const id = toast.show({
      message: 'This is a fully customized toast',
      type: 'success', // 'success', 'error', or 'info'
      position: 'bottom-left',
      duration: 4000,
      theme: 'light',
      onHide: () => console.log('Toast was hidden')
    });
    
    // You can dismiss the toast programmatically
    // setTimeout(() => toast.dismiss(id), 2000);
  };
  
  const dismissAllToasts = () => {
    toast.dismissAll();
  };

  return (
    <div>
      <button onClick={showAdvancedToast}>Show Advanced Toast</button>
      <button onClick={dismissAllToasts}>Dismiss All Toasts</button>
    </div>
  );
}

Vue

<template>
  <div>
    <button @click="showAdvancedToast">Show Advanced Toast</button>
    <button @click="dismissAllToasts">Dismiss All Toasts</button>
  </div>
</template>

<script>
import { toast } from 'bunt-toast/vue';

export default {
  methods: {
    showAdvancedToast() {
      const id = toast.show({
        message: 'This is a fully customized toast',
        type: 'success',             // 'success', 'error', or 'info'
        position: 'bottom-left',
        duration: 4000,
        theme: 'light',
        onHide: () => console.log('Toast was hidden')
      });
      // You can dismiss the toast programmatically
      // setTimeout(() => toast.dismiss(id), 2000);
    },
    dismissAllToasts() {
      toast.dismissAll();
    }
  }
}
</script>

Using the Component Directly (Alternative)

If you need more control over the rendering process, you can use the component directly. This is useful for integrating with UI libraries or complex state management.

React

import { ReactToast } from 'bunt-toast/react';
import { createRoot } from 'react-dom/client';

function App() {
  const showToast = () => {
    // Create a mount element
    const toastElement = document.createElement('div');
    document.body.appendChild(toastElement);
    
    // Render the toast component
    const root = createRoot(toastElement);
    root.render(
      <ReactToast
        message="Operation successful!"
        type="success"
        position="top-right"
        theme="light"
        duration={3000}
        onHide={() => {
          root.unmount();
          toastElement.remove();
        }}
      />
    );
  };

  return <button onClick={showToast}>Show Toast</button>;
}

Vue

<template>
  <button @click="showToast">Show Toast</button>
</template>

<script>
import { createApp, h } from 'vue';
import { VueToast } from 'bunt-toast/vue';

export default {
  methods: {
    showToast() {
      // Create a mount element
      const toastElement = document.createElement('div');
      document.body.appendChild(toastElement);

      // Create and mount the toast component
      const app = createApp({
        render() {
          return h(VueToast, {
            message: "Operation successful!",
            type: "success",
            position: "top-right",
            theme: "light",
            duration: 3000,
            onHide: () => {
              app.unmount();
              toastElement.remove();
            },
          });
        },
      });
      app.mount(toastElement);
    },
  },
};
</script>

## License

MIT