fkhadra / react-toastify

React notification made easy 🚀 !

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 🌒
• Pause timer programmaticaly
• Stacked notifications!
• 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 Issues

EventManager.js:87 <SHOW_TOAST> Event is not registered. Did you forgot to bind the event ?

There are times I want to show the toast outside of a button click. In these cases, the console will show the following alert:
EventManager.js:87 <SHOW_TOAST> Event is not registered. Did you forgot to bind the event ?

Prepare migration to react v16

Update documentation and gh-pages

Style object not applied ?

I was trying to pass a style object with the balance of options as:

const UpAvlOpts = {
  type: 'info',
  autoClose: false,
  style: {
    color: 'black',
  }
};

Yet the style wouldn't apply. Is there a different way we should pass the inline object?
The balance of options are working as expected.

Image for readme

add browser Compatibility list

I've tested a basic example on:
Firefox
Chrome
Safari
Edge
without issue.
However it seems that IE 11 didn't work.

Custom close button

Will be nice if I can use close button from my React component.

API may look like

toast(close => <CustomToast onClose={close} text='hello' type='info'/>, options)

Prevent Duplicates

First - thanks for this project!

Is it possible to add an option to prevent duplicated messages?
Other toastr libraries have this feature and I really think it's a good one.

Thanks!

Console warning: Unknown prop `closeToast` on <div> tag. Remove this prop from the element.

Hey,

Getting this warning when using toast:

Warning: Unknown prop closeToaston <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop

This is my usage (styling and content text simplified):

import { toast } from 'react-toastify';

export const successToast = () =>  toast(
    <div>
        <span>Completed successfully</span>
    </div>,
    {
        autoClose: 5000,
        type: 'success'
    }
);

Edit:
Made a small workaround to avoid this warning (still should be fixed though):

const Container = (props) => <div>{props.children}</div>;

export const successToast = () =>  toast(
    <Container>
        <div>
            <span>Completed successfully</span>
        </div>
    </Container>,
    {
        autoClose: 5000,
        type: 'success'
    }
);

Active toast's counter

It would be useful to know how many messages are being currently displayed so you can dynamically add a "Dismiss all".

Custom close button not working

Even though its rendered, I don't see it being doing anything as there is no click event attached to it here

Migrate to react-transition v2

Render notification outside of the main react component to avoid style like translate to break position:fixed

Issue is related to react-contexify
more details here
Wait for react16 to use createPortal

Cannot read property 'props' of undefined

When mouseover on the ToastContainer(with autoclose) and click closebtn, throw:

Uncaught TypeError: Cannot read property 'props' of undefined

how to handle two or more instances?

im trying to position the toast relative to the container, I accomplish that by setting:

.toastify--top-center {
    position: absolute;
}

and its parent relative:

 <div style={{position:'relative'}}>
        <ToastContainer autoClose={4000} hideProgressBar closeOnClick pauseOnHover />
</div>

and it works perfect, and shows relative to the header inside a modal window I have but...
,if I add another ToastContainer ouside this modal window, then , the toast doesnt show anymore when called from this parent window. also, the modal window now shows a duplicate toast.

it loos like the ToastContainer is global, and cannot be placed in more than once, or it gets overwriten, only the one inside the modal window works, and shows the parent toast at the same time its toast. thats why its duplicated. how can i place more than one ToastContainer so its shown positioned relative to different parents?

thanks.

Position option in toast don´t work.

To set the position option in the ToastContainer works. If the position is set to the toastr directly, it doesn´t.

polyfill not being used for libs

the code installed using npm doesnt work for ie11, I had to transpile the react-toastify libs using babel-plugin-transform-object-assign polyfill to make it work.

could this be done on the main repo please?

thanks!

can we show a background colour/image to the toasts appearing.

currently, the toast messages are coming in a white background popup, is there a way to customize the colour/background image of the same to match it with the application theme or some custom requirement.

Regards,
Kapil.

css-modules

Great module! Any plans making it work with css-modules out of the box?

removeCloseButton not working?

My code

<ToastContainer className="toast-container" removeCloseButton={true} autoClose={1500}/>

autoClose is working fine along with other props that I try. Can't get removeCloseButton to work for the life of me

Update documentation with advanced example

Notifications are never removed from dom

After every item is disappear then we will see in dom react-empty comment, all dead notifications should be removed also internally

Adding className to options does not have any affect on a toast style

import style from './style.scss'
....
const options = {
autoClose: 6000,
hideProgressBar: false,
position: toast.POSITION.TOP_LEFT,
className: style.toast,
pauseOnHover: true
};
toastID = toast('Test', options)
....
this not applying any changes. Toast shows with toastify-content--default style

react-toastify version: ^2.1.2

Toast not disappearing

toast.success("Your passwords do not match", {autoClose: 4000});

Using toast.dismiss(<toast_id) . Even when I leave it default it won't work.

No errors in console and I tried modifying the package I just can't figure it out.
Anyone else experienced this or have any ideas?

React 16.0.0. update

Hi.

Thanks for the amazing lib.

Any chance of an update so react-toastify will work in React 16?

Thanks in advance.

Update to new prop-types package https://www.npmjs.com/package/prop-types

Enhancement: Assignable Toast ID & Dismiss

One set of the features missing from this lovely module is the ability to identify and close existing toasts programmatically. Example: a timer is running and then there is a reason to dismiss it - like a download completes quicker than an expiring timer and you'd like to replace with a completed notification.

Error in DefaultTransition.js

There is an error while running webpack in production mode webpack -p when using react-toastify.

react-toastify version

+-- [email protected] 
  `-- [email protected] 

Webpack Version: webpack 3.6.0

ERROR in ./node_modules/react-toastify/lib/DefaultTransition.js
Module not found: Error: Can't resolve 'react-transition-group/Transition' in '/home/pratik/Projects/watercart/node_modules/react-toastify/lib'
 @ ./node_modules/react-toastify/lib/DefaultTransition.js 13:18-62
 @ ./node_modules/react-toastify/lib/ToastContainer.js
 @ ./node_modules/react-toastify/lib/index.js
 @ ./client/admin/admin-app.js
 @ ./client/admin/admin.js

Hold off showing toast until user is no longer idle

Hi there, is there a plan to hold off the toast until the user moves its mouse if the window is already the foremost one or until the user brings the window back to the foreground?

Review the api when passing prop

Maybe remove the childrenProps key and pass the props directly to the component.
I need to think a bit

autoClose is based on the progress bar animation

If I write a custom CSS without progress bar animation (let's say I do not want to use them, so they are always hidden and I don't care styling them), the toast never closes itself, despite the autoClose property.

I think this is conceptually wrong, I mean, relying on something visual and completely optional to implement an apparently non-related key feature. Also, this break compatibility with IE9 because it does not support CSS animations events (assuming we care about IE11-).

I can work on a PR to make autoClose work just with normal setInterval if you prefer.

Position property in options to toast object

Just found this library and used it. Absolutely loved it. Only feature I felt missing was position property in options to toast object.

Is it limitation by design?

The default design is not usable

The default design is very much different than a design that is used most of the times. Below are the most commonly used designs.

Feature Request: onHover?

for example: http://stonecircle.github.io/ember-cli-notifications/

there is a timer, visual represented by a progress bar on the bottom, that is paused upon hover (which is super handy if an error toast happens to be long).

Are there plans to have this sort of functionality, or add a hook that would allow us to implement it?

Add more animations

By default, the toast bounce on enter and on exit. I think others animations would be better suitted depending on the UI.

static propTypes = {
// other props
animations: PropTypes.oneOf(['bounce', 'fade', 'roll', 'etc...']),
};

// Can be defined for the toast container
<ToastContainer animation="fade" /> 

// Can also be defined per toast 
toast('foo', {
animation: 'fade'
});

This is just an idea for the moment

Edit: Instead of providing animation I'll really on react-transition so end user can build them with ease.

Animations not working, autoClose not working

Oddly, animations are not working for me at all. When the toast appears, there is no animation. Similarly, when I manually close the toast, there is an abrupt close with no animation. And because autoClose is dependent on the animation, the toast will never close until triggered manually.

I have the CSS file referenced correctly, and styling seems to work otherwise. My implementation is as follows:

Container:

<ToastContainer
    position="top-right"
    type="error"
    autoClose={4000}
    hideProgressBar={false}
    closeOnClick={true}
    pauseOnHover={true}
/>

Trigger code (tried placing this in various areas in my code with the same result):

toast('message', {
    type: toast.TYPE.ERROR,
    autoClose: 3000,
    hideProgressBar: false,
    pauseOnHover: true,
});

I've tried every variation of settings to no avail. This was attempted using the newest versions of Chrome and Safari. What could be going wrong here?

Add fallback to setTiemout

This relate to issue 27.

If a browser don't support animation play state. The lib should provide a viable alternative

Fix ie11 animation and close button

• Entrance and exit animation are buggy on ie11.
• The close button is not well positioned when there is a progress bar

Turn off pointer events when no toast is displayed

I noticed that I'm losing pointer events everything beneath the toastify element. Why not just set pointer-events: none while there's no toast being displayed?

Enhancement: Align colors to bootstrap colors

I noticed the container colours (the left border of toast) doesn't match those in vanilla bootstrap. It'd be nice if it did for consistency.

I believe the default Bootstrap colour values are:
Success: #5cb85c
Info: #5bc0de
Warning: #f0ad4e
Error: #d9534f

2.1.3 breaks TypeScript build

ERROR in [at-loader] ./node_modules/react-toastify/index.d.ts:23:16 
    TS2304: Cannot find name 'Transition'.
ERROR in [at-loader] ./node_modules/react-toastify/index.d.ts:37:37 
    TS2686: 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.

I think there need to be imports for React and Transition.

Option to Replace Progress bar with Fade in and Fade out

Is there anyway we can replace progress bar with fade out effect?

For my usage i want to fade out the toast slowly in the given time.
Is there any way to do it?

Thanks
D

The space in of left boxes from window & right boxes from window is different.

The space in of left boxes from window & right boxes from window is different.
It's due to left: 1em given to left boxes and right: 2em given to right boxes.

Invariant Violation: ToastContainer.render()

I have two working version of my application, one is local host and one on aws ,
weirdly, notify function works fine on my local host by on the aws i get this error upon launch

Invariant Violation: ToastContainer.render() ...

Use font awesome close button by default ?

I'm not sure if I like the default close button. It looks ugly for me.

Shouldn't `react` and `react-dom` be listed as peer dependencies?

react is currently a normal dependency, and react-dom a development one. Shouldn't they be listed as peer dependencies?

Inject buttons in the toast message(Feature Request)

First of all I want to say thank you for this package it is really good and simple to use.

Next This is more a feature request then an issue.
I want to inject buttons in the toast.
So if you can provide a way to inject React Components/array of buttons/HTML in to the toast it will be awesome.

The use case could be like each type of toast can be having different set of buttons
so putting it in the container may not be possible but may be options for the toast while calling it can handle it.

I guess from all other toast npm that is the only feature it is missing 😉

Feature/Keep running on hover

@pramodZipGo, I'll create a new issue to add the feature.
It's easier for me to track 😀

Image on mobile for readme

Would you be so kind to publish typings for this?

Really wanted to use this with Typescript.
Would be really nice if you could add Typings and publish to @types