All Projects → jossmac → React Toast Notifications

jossmac / React Toast Notifications

Licence: mit
🍞 A toast notification system for react

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React Toast Notifications

Notistack
Highly customizable notification snackbars (toasts) that can be stacked on top of each other
Stars: ✭ 2,562 (+21.83%)
Mutual labels:  notifications, toast, snackbar, toast-notifications
React Hot Toast
Smoking hot React Notifications 🔥
Stars: ✭ 4,282 (+103.61%)
Mutual labels:  notifications, snackbar, toast-notifications
SteamAchievementNotifier
Steam Achievement Notifier is an Electron application that shows a customisable notification when you unlock any Steam Achievement! It uses the Steam Web API to track achievement stats in real time, and displays an achievement summary within the notification.
Stars: ✭ 77 (-96.34%)
Mutual labels:  notifications, toast, toast-notifications
bs5-utils
A JavaScript utility package for Bootstrap 5 components.
Stars: ✭ 26 (-98.76%)
Mutual labels:  toast, snackbar, toast-notifications
tall-toasts
A Toast notification library for the Laravel TALL stack. You can push notifications from the backend or frontend to render customizable toasts with almost zero footprint on the published CSS/JS 🔥🚀
Stars: ✭ 296 (-85.92%)
Mutual labels:  notifications, toast, toast-notifications
Svelte Notifications
Svelte toast notifications component that can be used in any JS application
Stars: ✭ 146 (-93.06%)
Mutual labels:  notifications, toast
Demo Progressive Web App
🎉 A demo for progressive web application with features like offline, push notifications, background sync etc,
Stars: ✭ 798 (-62.05%)
Mutual labels:  notifications, snackbar
React Toastify
React notification made easy 🚀 !
Stars: ✭ 8,113 (+285.78%)
Mutual labels:  toast, snackbar
Reapop
📮 A simple and customizable React notifications system
Stars: ✭ 1,155 (-45.08%)
Mutual labels:  notifications, toast
Vue Toastification
Vue notifications made easy!
Stars: ✭ 747 (-64.48%)
Mutual labels:  notifications, toast
Sneaker
A lightweight Android library for customizable alerts
Stars: ✭ 928 (-55.87%)
Mutual labels:  toast, snackbar
Notyf
👻 A minimalistic, responsive, vanilla JavaScript library to show toast notifications.
Stars: ✭ 2,093 (-0.48%)
Mutual labels:  notifications, toast
Laravel Notify
Flexible Flash notifications for Laravel
Stars: ✭ 787 (-62.58%)
Mutual labels:  notifications, toast
Notie
🔔 a clean and simple notification, input, and selection suite for javascript, with no dependencies
Stars: ✭ 6,170 (+193.39%)
Mutual labels:  notifications, toast
Burnttoast
Module for creating and displaying Toast Notifications on Microsoft Windows 10.
Stars: ✭ 796 (-62.15%)
Mutual labels:  notifications, toast
Vue Snotify
Vuejs 2 Notification Center
Stars: ✭ 755 (-64.1%)
Mutual labels:  notifications, toast
Androidutilcode
AndroidUtilCode 🔥 is a powerful & easy to use library for Android. This library encapsulates the functions that commonly used in Android development which have complete demo and unit test. By using it's encapsulated APIs, you can greatly improve the development efficiency. The program mainly consists of two modules which is utilcode, which is commonly used in development, and subutil which is rarely used in development, but the utils can be beneficial to simplify the main module. 🔥
Stars: ✭ 30,239 (+1337.9%)
Mutual labels:  toast, snackbar
Livesmashbar
An elegant looking and easy to use informative library with LiveData integration for Android.
Stars: ✭ 107 (-94.91%)
Mutual labels:  toast, snackbar
Android Appmsg
In-layout notifications. Based on Toast notifications and article by Cyril Mottier (http://android.cyrilmottier.com/?p=773).
Stars: ✭ 1,384 (-34.19%)
Mutual labels:  toast, snackbar
Vuetify Toast Snackbar
Basic Vue toast service that uses Vuetify Snackbar component.
Stars: ✭ 123 (-94.15%)
Mutual labels:  toast, snackbar

🚨 Not Maintained

This was a great project to learn from and fulfilled the requirements it set out to. Unfortunately, I can no-longer give this project the time it needs. Consider react-hot-toast as an alternative, or look at the source and make your own 🎉 (there really isn't much to it).

No Maintenance Intended


react-toast-notifications

React Toast Notifications

A configurable, composable, toast notification system for react.

https://jossmac.github.io/react-toast-notifications

Install

yarn add react-toast-notifications

Use

Wrap your app in the ToastProvider, which provides context for the Toast descendants.

import { ToastProvider, useToasts } from 'react-toast-notifications';

const FormWithToasts = () => {
  const { addToast } = useToasts();

  const onSubmit = async value => {
    const { error } = await dataPersistenceLayer(value);

    if (error) {
      addToast(error.message, { appearance: 'error' });
    } else {
      addToast('Saved Successfully', { appearance: 'success' });
    }
  };

  return <form onSubmit={onSubmit}>...</form>;
};

const App = () => (
  <ToastProvider>
    <FormWithToasts />
  </ToastProvider>
);

ToastProvider Props

For brevity:

  • PlacementType is equal to 'bottom-left' | 'bottom-center' | 'bottom-right' | 'top-left' | 'top-center' | 'top-right'.
  • TransitionState is equal to 'entering' | 'entered' | 'exiting' | 'exited'.
Property Description
autoDismissTimeout number Default 5000. The time until a toast will be dismissed automatically, in milliseconds.
autoDismiss boolean Default: false. Whether or not to dismiss the toast automatically after a timeout.
children Node Required. Your app content.
components { ToastContainer, Toast } Replace the underlying components.
newestOnTop boolean Default false. When true, insert new toasts at the top of the stack.
placement PlacementType Default top-right. Where, in relation to the viewport, to place the toasts.
portalTargetSelector string Which element to attach the container's portal to. Uses document.body when not provided.
transitionDuration number Default 220. The duration of the CSS transition on the Toast component.

Toast Props

Property Description
appearance Used by the default toast. One of success, error, warning, info.
children Required. The content of the toast notification.
autoDismiss boolean Inherited from ToastProvider if not provided.
autoDismissTimeout number Inherited from ToastProvider.
onDismiss: Id => void Passed in dynamically. Can be called in a custom toast to dismiss it.
placement PlacementType Inherited from ToastProvider.
transitionDuration number Inherited from ToastProvider.
transitionState: TransitionState Passed in dynamically.

Hook

The useToast hook has the following signature:

const {
  addToast,
  removeToast,
  removeAllToasts,
  updateToast,
  toastStack,
} = useToasts();

The addToast method has three arguments:

  1. The first is the content of the toast, which can be any renderable Node.
  2. The second is the Options object, which can take any shape you like. Options.appearance is required when using the DefaultToast. When departing from the default shape, you must provide an alternative, compliant Toast component.
  3. The third is an optional callback, which is passed the added toast ID.

The removeToast method has two arguments:

  1. The first is the ID of the toast to remove.
  2. The second is an optional callback.

The removeAllToasts method has no arguments.

The updateToast method has three arguments:

  1. The first is the ID of the toast to update.
  2. The second is the Options object, which differs slightly from the add method because it accepts a content property.
  3. The third is an optional callback, which is passed the updated toast ID.

The toastStack is an array of objects representing the current toasts, e.g.

[
  {
    content: 'Something went wrong',
    id: 'generated-string',
    appearance: 'error',
  },
  { content: 'Item saved', id: 'generated-string', appearance: 'success' },
];

Replaceable Components

To bring each toast notification inline with your app, you can provide alternative components to the ToastProvider:

import { ToastProvider } from 'react-toast-notifications';

const MyCustomToast = ({ appearance, children }) => (
  <div style={{ background: appearance === 'error' ? 'red' : 'green' }}>
    {children}
  </div>
);

const App = () => (
  <ToastProvider components={{ Toast: MyCustomToast }}>...</ToastProvider>
);

To customize the existing component instead of creating a new one, you may import DefaultToast:

import { DefaultToast } from 'react-toast-notifications';
export const MyCustomToast = ({ children, ...props }) => (
  <DefaultToast {...props}>
    <SomethingSpecial>{children}</SomethingSpecial>
  </DefaultToast>
);

Alternatives

This library may not meet your needs. Here are some alternative I came across whilst searching for this solution:

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].