All Projects → fkhadra → React Toastify

fkhadra / React Toastify

Licence: mit
React notification made easy 🚀 !

Programming Languages

typescript
32286 projects
SCSS
7915 projects
CSS
56736 projects
HTML
75241 projects

Projects that are alternatives of or similar to React Toastify

mosha-vue-toastify
A light weight and fun Vue 3 toast or notification or snack bar or however you wanna call it library.
Stars: ✭ 185 (-97.72%)
Mutual labels:  toast, snackbar, notification
denbun
Adjust showing frequency of Android app messages, and to be more user friendly 🐦
Stars: ✭ 17 (-99.79%)
Mutual labels:  toast, snackbar, notification
Noty
A simple library for creating animated warnings/dialogs/alerts for Android.
Stars: ✭ 136 (-98.32%)
Mutual labels:  toast, notification, snackbar
Devutils
🔥 ( 持续更新,目前含 160+ 工具类 ) DevUtils 是一个 Android 工具库,主要根据不同功能模块,封装快捷使用的工具类及 API 方法调用。该项目尽可能的便于开发人员,快捷、高效开发安全可靠的项目。
Stars: ✭ 680 (-91.62%)
Mutual labels:  toast, snackbar
MaterialToast
A fully and highly customizable material designed Toast for Android.
Stars: ✭ 31 (-99.62%)
Mutual labels:  toast, notification
SimpleToast
SimpleToast is a simple, lightweight, flexible and easy to use library to show toasts / popup notifications inside iOS or MacOS applications in SwiftUI. Because of the flexibility to show any content it is also possible to use the library for showing simple modals.
Stars: ✭ 131 (-98.39%)
Mutual labels:  toast, notification
AckBar
AckBar is a very lightweight and customizable android library to display brief message to user.
Stars: ✭ 14 (-99.83%)
Mutual labels:  toast, snackbar
toast-swift
A Swift Toast view - iOS 14 style and newer - built with UIKit. 🍞
Stars: ✭ 85 (-98.95%)
Mutual labels:  toast, notification
smart-show
Toast # Snackbar # Dialog
Stars: ✭ 500 (-93.84%)
Mutual labels:  toast, snackbar
Hot Toast
🍞 Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.
Stars: ✭ 328 (-95.96%)
Mutual labels:  toast, snackbar
Cookiebar
CookieBar is a lightweight library for showing a brief message at the top or bottom of the screen.
Stars: ✭ 497 (-93.87%)
Mutual labels:  toast, snackbar
bs5-utils
A JavaScript utility package for Bootstrap 5 components.
Stars: ✭ 26 (-99.68%)
Mutual labels:  toast, snackbar
React Cool Portal
😎 🍒 React hook for Portals, which renders modals, dropdowns, tooltips etc. to <body> or else.
Stars: ✭ 458 (-94.35%)
Mutual labels:  toast, notification
Notie
🔔 a clean and simple notification, input, and selection suite for javascript, with no dependencies
Stars: ✭ 6,170 (-23.95%)
Mutual labels:  toast, notification
react-notification-alert
React bootstrap 4 notification alert
Stars: ✭ 34 (-99.58%)
Mutual labels:  react-component, notification
Toast
To use it in PCL or .NetStandard projects write this line of code : CrossToastPopUp.Current.ShowToastMessage("Message");
Stars: ✭ 51 (-99.37%)
Mutual labels:  toast, notification
Fftoast
A very powerful iOS message notifications and AlertView extensions. It can be easily realized from the top of the screen, the bottom of the screen and the middle of the screen pops up a notification. You can easily customize the pop-up View.
Stars: ✭ 649 (-92%)
Mutual labels:  toast, notification
Snackbar
A tiny browser library for showing a brief message at the bottom of the screen (1kB gzipped).
Stars: ✭ 224 (-97.24%)
Mutual labels:  toast, snackbar
React Notie
Simple notifications for react
Stars: ✭ 27 (-99.67%)
Mutual labels:  react-component, notification
Smart Show
Toast & Snackbar & TopBar & Dialog
Stars: ✭ 430 (-94.7%)
Mutual labels:  toast, snackbar

React-Toastify

Financial Contributors on Open Collective React-toastify CI npm npm NPM Coveralls github

React toastify

🎉 React-Toastify allows you to add notifications to your app with ease. No more nonsense!

Installation

$ npm install --save react-toastify
$ yarn add react-toastify

Features

  • Easy to set up for real, you can make it work in less than 10sec!
  • Super easy to customize
  • RTL support
  • Swipe to close 👌
  • Can choose swipe direction
  • Super easy to use an animation of your choice. Works well with animate.css for example
  • Can display a react component inside the toast!
  • Has onOpen and onClose hooks. Both can access the props passed to the react component rendered inside the toast
  • Can remove a toast programmatically
  • Define behavior per toast
  • Pause toast when the window loses focus 👁
  • Fancy progress bar to display the remaining time
  • Possibility to update a toast
  • You can control the progress bar a la nprogress 😲
  • You can limit the number of toast displayed at the same time
  • Dark mode 🌒
  • And much more !

The gist

  import React from 'react';

  import { ToastContainer, toast } from 'react-toastify';
  import 'react-toastify/dist/ReactToastify.css';
  
  function App(){
    const notify = () => toast("Wow so easy!");

    return (
      <div>
        <button onClick={notify}>Notify!</button>
        <ToastContainer />
      </div>
    );
  }

Demo

A demo is worth a thousand words

Documentation

Check the documentation to get you started!

Contribute

Show your ❤️ and support by giving a . Any suggestions are welcome! Take a look at the contributing guide.

You can also find me on reactiflux. My pseudo is Fadi.

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

Release Notes

You can find the release note for the latest release here

You can browse them all here

License

Licensed under MIT

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].