TypeScript Toastify 📎

      import Toast from typescript-toastify;

const toast = new Toast({
  position: "top-right",
  toastMsg: "🦚 TypeScript Toastify",
  autoCloseTime: 2000,
  canClose: true,
  showProgress: true,
  pauseOnHover: true,
  pauseOnFocusLoss: true,
  type: "default",
  theme: "light"
});

Code snippet example

Position:

Toast Type:

Theme:

Options:

Features:

  1. Easy to set up 😊
  2. Super easy to customize
  3. Has onClose function, which runs function you define when toast closes ❌
  4. Can remove a toast programmatically 🧑🏻‍💻
  5. Update toast in between
  6. Pause toast when the window loses focus 👀
  7. Pause toast on toast hover
  8. Fancy progress bar to display the remaining time
  9. Dark mode 🌑
  10. Set custom position
  11. Set toast closing time
  12. Can use different types of toast like info, error, warning ⚠️
  13. And much more! 😃

Documentation

TypeScript-Toastify is a TypeScript library for creating customizable toast notifications in web applications. This documentation provides an overview of the available options, how to create a toast, and their respective types.

Installation

To use TypeScript-Toastify in your project, you can install it via npm:

      npm i typescript-toastify

Usage

To create a toast using TypeScript Toastify, you need to instantiate the Toast class with the desired options. Here's how you can create a toast:

      import Toast from 'typescript-toastify';

const toast = new Toast({
  position: "top-right",
  toastMsg: "🌏 Hello, World!",
  autoCloseTime: 4500,
  canClose: true,
  showProgress: true,
  pauseOnHover: true,
  pauseOnFocusLoss: true,
  type: "default",
  theme: "dark"
});

Options

TypeScript-Toastify supports the following options:

position (string)

Specifies the position where the toast notification will appear on the screen.

Options:

toastMsg (string)

The message to be displayed in the toast notification.

autoCloseTime (number)

Specifies the duration (in milliseconds) after which the toast will automatically close.

canClose (boolean)

Determines whether the user can manually close the toast by clicking on it.

showProgress (boolean)

Specifies whether to show a progress bar indicating the time remaining before the toast closes automatically.

pauseOnHover (boolean)

Determines whether the toast progress and auto-close timer pause when the mouse hovers over the toast.

pauseOnFocusLoss (boolean)

Specifies whether to pause the toast progress and auto-close timer when the page loses focus.

type (string)

Specifies the type of toast notification. Options include:

theme (string)

Specifies the theme of the toast notification. Options include:

Methods

update(options: Object)

Updates the toast notification with new options.

      const toast = new Toast({ });
toast.update({ toastMsg: 'New message' });

remove( )

Removes the toast notification from the screen.

      const toast = new Toast({ });
toast.remove( );

Events

onClose( )

A function that runs when the toast notification is closed.

      const toast = new Toast({ 
  onClose: () => 
  console.log('Toast closed 😶‍🌫️') 
});

Example: 

      import Toast from 'typescript-toastify';

const toast = new Toast({
  position: "top-right",
  toastMsg: "🌏 Hello, World!",
  onClose: () => { alert("Toast closed 😶‍🌫️") },
  autoCloseTime: 3000,
  canClose: true,
  showProgress: true,
  pauseOnHover: true,
  pauseOnFocusLoss: true,
  type: "info",
  theme: 'light'
});

Conclusion

TypeScript-Toastify offers a simple and customizable way to implement toast notifications in your TypeScript web applications. With various options for positioning, styling, and behavior, you can tailor the toast notifications to suit your application's needs.

License

Licensed under MIT