GithubHelp home page GithubHelp logo

bravo-lin / react-toastify Goto Github PK

View Code? Open in Web Editor NEW

This project forked from fkhadra/react-toastify

1.0 0.0 0.0 4.4 MB

React notification made easy ๐Ÿš€ !

Home Page: https://fkhadra.github.io/react-toastify/introduction

License: MIT License

Shell 0.05% JavaScript 1.34% TypeScript 86.93% CSS 2.16% HTML 0.31% SCSS 9.21%

react-toastify's Introduction

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

react-toastify's People

Contributors

fkhadra avatar dependabot[bot] avatar rhdeck avatar alanlima avatar sarahsga avatar wilson-webdev avatar trylle avatar roblotter avatar kennethormandy avatar vitaliyhayda avatar ramospedro avatar pablomaribondo avatar martinadamec avatar ugzuzg avatar dasenkiv avatar cakesifu avatar agneym avatar newtonry avatar pogodaanton avatar pnarielwala avatar pnarielwala-tc avatar osnysantos avatar mudafar avatar essential-randomness avatar neolegends avatar tundraray avatar mikebarkmin avatar mateuszpigula avatar rambatino avatar adidi avatar

Stargazers

Roman avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.