Installation

Install @raytolfas/toastify in your project to start showing toast notifications.

Pure HTML

1. Install the package:

npm install @raytolfas/toastify

2. Include the UMD script and CSS in your HTML:

<script src="node_modules/@raytolfas/toastify/dist/raytolfas-toastify.umd.js"></script>
<link rel="stylesheet" href="node_modules/@raytolfas/toastify/toastify.css">

3. Use in JavaScript:

<button onclick="RaytolfasToastify.toast({ message: 'Success!', type: 'success', duration: 3000 })">Show Toast</button>

React/Vite

1. Install the package:

npm install @raytolfas/toastify

2. Import in your component:

import useToast from '@raytolfas/toastify';
import '@raytolfas/toastify/toastify.css';

function App() {
  const toast = useToast();
  return (
    <button
      onClick={() => {
        toast({
          message: 'Success!',
          type: 'success',
        });
      }}
    >
      Show Toast
    </button>
  );
}

Next.js

1. Install the package:

npm install @raytolfas/toastify

2. Import in your page or component:

import { toast } from '@raytolfas/toastify';
import '@raytolfas/toastify/toastify.css';

export default function Page() {
  return (
    <button
      onClick={() => {
        toast({
          message: 'Success!',
          type: 'success',
        });
      }}
    >
      Show Toast
    </button>
  );
}

Continue to Instructions to learn how to use the library.