react-toastify
Advanced tools
The react-toastify package allows developers to add customizable notification toasts to their React applications. It provides an easy way to display success, error, warning, and informational messages with a variety of animations, positions, and options.
Displaying Toast Notifications
This feature allows you to display a simple toast notification with a message. The toast function can be called with a string message to display it to the user.
import { toast } from 'react-toastify';
toast('Hello World!');Customizing Toast Appearance
This feature allows you to customize the appearance and behavior of the toast. You can specify the type (like success, error, etc.), position, auto-close time, and many other options.
import { toast } from 'react-toastify';
toast.success('Success!', {
position: "top-right",
autoClose: 5000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
});Custom Rendered Components
This feature allows you to render a custom React component inside the toast. This is useful for creating complex toasts with custom layouts and functionality.
import { toast } from 'react-toastify';
const CustomToast = ({ closeToast }) => (
<div>
Something went wrong! <button onClick={closeToast}>Close</button>
</div>
);
toast(<CustomToast />);Updating Existing Toasts
This feature allows you to update an existing toast's content or appearance. You can change the message, type, or any other property of the toast after it has been displayed.
import { toast } from 'react-toastify';
const toastId = React.useRef(null);
const updateToast = () => {
toast.update(toastId.current, { type: toast.TYPE.INFO, render: 'Updated!' });
};
// Create a toast and save its ID
toastId.current = toast('Initial message');Controlling Toasts Programmatically
This feature gives you programmatic control over the toasts. You can dismiss all toasts or specific toasts by their ID, which can be useful in scenarios where user actions or other events should close notifications.
import { toast } from 'react-toastify';
// Display a toast
toast('Will close in 5 seconds', { autoClose: 5000 });
// Dismiss all toasts on demand
toast.dismiss();
// Dismiss a specific toast by ID
toast.dismiss(toastId.current);Notistack is a Snackbar notification library that can be used with Material-UI. It allows for stacking notifications and offers similar customization options. Compared to react-toastify, it is more tightly integrated with Material-UI components and design patterns.
React Notification System is another package for adding notifications to a React app. It provides a different set of customization options and a slightly different API. It is less maintained compared to react-toastify and might not have as many features.
SweetAlert2 with React content is a package for creating beautiful, responsive, customizable, and accessible (WAI-ARIA) replacement for JavaScript's popup boxes with React content. It is more focused on modal dialogs and alerts rather than toasts, but it can be used for similar notification purposes.
š React-Toastify allow you to add notification to your app with ease. No more nonsense!
A demo is worth a thousand words
$ npm install --save react-toastify
$ yarn add react-toastify
RC.5
useLazyContainer has been removed. The lazy container is opt-in
onOpen and onClose hooks. Both can access the props passed to the react component rendered inside the toastToastContainer is optional if you want to šThe toasts inherit ToastContainer's props. Props defined on toast supersede ToastContainer's props.
import React, { Component } from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
// minified version is also included
// import 'react-toastify/dist/ReactToastify.min.css';
class App extends Component {
notify = () => toast("Wow so easy !");
render(){
return (
<div>
<button onClick={this.notify}>Notify !</button>
<ToastContainer />
</div>
);
}
}
Remember to render the ToastContainer once in your application tree.
If you can't figure out where to put it, rendering it in the application root would be the best bet.
import React, { Component } from 'react';
import { toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
// Call it once in your app. At the root of your app is the best place
toast.configure()
const App = () => {
const notify = () => toast("Wow so easy !");
return <button onClick={notify}>Notify !</button>;
}
The library will mount a ToastContainer for you if none is mounted.
The configure function accept the same props as the ToastContainer. As soon as the container is rendered call to configure will have no effect.
toast.configure({
autoClose: 8000,
draggable: false,
//etc you get the idea
});
To enable multiple container support, you have to pass enableMultiContainer and specify a containerId and use it in
each toast, to do so add containerId to the toast's options object.
Note: adding enableMultiContainer prop to the <ToastContainer/ > will:
containerId match the container containerId so it can be rendered.toast that has containerId.toast and <ToastContainer/ > does not include containerId and containerId respectively.A simple example to demonstrate multi toast container capability.
import React, { Component } from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
class App extends Component {
notifyA = () => toast('Wow so easy !', {containerId: 'A'});
notifyB = () => toast('Wow so easy !', {containerId: 'B'});
render(){
return (
<div>
<ToastContainer enableMultiContainer containerId={'A'} position={toast.POSITION.BOTTOM_LEFT} />
<ToastContainer enableMultiContainer containerId={'B'} position={toast.POSITION.TOP_RIGHT} />
<button onClick={this.notifyA}>Notify A !</button>
<button onClick={this.notifyB}>Notify B !</button>
</div>
);
}
}
By default, all the toasts will be positioned on the top right of your browser. If a position is set on a toast, the one defined on ToastContainer will be replaced.
The following values are allowed: top-right, top-center, top-left, bottom-right, bottom-center, bottom-left
For convenience, toast expose a POSITION property to avoid any typo.
// toast.POSITION.TOP_LEFT, toast.POSITION.TOP_RIGHT, toast.POSITION.TOP_CENTER
// toast.POSITION.BOTTOM_LEFT,toast.POSITION.BOTTOM_RIGHT, toast.POSITION.BOTTOM_CENTER
import React, { Component } from 'react';
import { toast } from 'react-toastify';
class Position extends Component {
notify = () => {
toast("Default Notification !");
toast.success("Success Notification !", {
position: toast.POSITION.TOP_CENTER
});
toast.error("Error Notification !", {
position: toast.POSITION.TOP_LEFT
});
toast.warn("Warning Notification !", {
position: toast.POSITION.BOTTOM_LEFT
});
toast.info("Info Notification !", {
position: toast.POSITION.BOTTOM_CENTER
});
toast("Custom Style Notification with css class!", {
position: toast.POSITION.BOTTOM_RIGHT,
className: 'foo-bar'
});
};
render(){
return <button onClick={this.notify}>Notify</button>;
}
}
import React from 'react';
import { ToastContainer } from 'react-toastify';
// close toast after 8 seconds
const App = () => (
<ToastContainer autoClose={8000} />
);
import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
class App extends Component {
closeAfter15 = () => toast("YOLO", { autoClose: 15000 });
closeAfter7 = () => toast("7 Kingdoms", { autoClose: 7000 });
render(){
return (
<div>
<button onClick={this.closeAfter15}>Close after 15 seconds</button>
<button onClick={this.closeAfter7}>Close after 7 seconds</button>
<ToastContainer autoClose={8000} />
</div>
);
}
}
<ToastContainer autoClose={false} />
toast("hello", {
autoClose: false
})
When you render a component, a closeToast function is passed as a props. That way you can close the toast on user interaction for example.
import React from 'react';
import { ToastContainer, toast } from "react-toastify";
const Msg = ({ closeToast }) => (
<div>
Lorem ipsum dolor
<button>Retry</button>
<button onClick={closeToast}>Close</button>
</div>
)
const App = () => (
<div>
<button onClick={() => toast(<Msg />)}>Hello š</button>
<ToastContainer />
</div>
);
You can also render a component using a function. More or less like a "render props":
toast(({ closeToast }) => <div>Functional swag š</div>);
An id is returned each time you display a toast, use it to remove a given toast programmatically by calling toast.dismiss(id)
Without args, all the displayed toasts will be removed.
import React, { Component } from 'react';
import { toast } from 'react-toastify';
class Example extends Component {
toastId = null;
notify = () => this.toastId = toast("Lorem ipsum dolor");
dismiss = () => toast.dismiss(this.toastId);
dismissAll = () => toast.dismiss();
render(){
return (
<div>
<button onClick={this.notify}>Notify</button>
<button onClick={this.dismiss}>Dismiss</button>
<button onClick={this.dismissAll}>Dismiss All</button>
</div>
);
}
}
"Talk is cheap. Show me the code"
The default behavior is to pause the toast timer whenever the window loses focus. You can opt-out by setting the pauseOnFocusLoss props to false:
// Opt-out for all toast
<ToastContainer pauseOnFocusLoss={false} />
// Opt-out per toast
toast('Hello', {
pauseOnFocusLoss: false
})
A custom toastId can be used to replace the one generated. You can use a number or a string.
import React, { Component } from 'react';
import { toast } from 'react-toastify';
class Example extends Component {
notify = () => {
toast("I cannot be duplicated !", {
toastId: 13
});
}
render(){
return (
<div>
<button onClick={this.notify}>Notify</button>
</div>
);
}
}
To prevent duplicates, you can check if a given toast is active by calling toast.isActive(id) like the snippet below. Or, you can use a custom toastId:
import React, { Component } from 'react';
import { toast } from 'react-toastify';
class Example extends Component {
toastId = null;
customToastId = 'xxx-yyy';
notify = () => {
if (! toast.isActive(this.toastId)) {
this.toastId = toast("I cannot be duplicated !");
}
toast("xxx-yyy cannot be duplicated", {
toastId: customToastId
});
}
render(){
return (
<div>
<button onClick={this.notify}>Notify</button>
</div>
);
}
}
You can delay the notification appearance as shown below. Under the hood the lib simply use setTimeout.
toast('Show now');
toast('Show after 1sec', { delay: 1000 })
Note: toast.dismiss() has no effect if called during the delay before a given toast appears.
Imagine you want to see the progress of a file upload. The example below feature axios, but it works with anything!
import React, { Component } from 'react';
import { toast } from 'react-toastify';
import axios from 'axios';
class Example extends Component {
upload = () => {
// we need to keep a reference of the toastId to be able to update it
let toastId = null;
axios.request({
method: "post",
url: "/foobar",
data: myData,
onUploadProgress: p => {
const progress = p.loaded / p.total;
// check if we already displayed a toast
if(toastId === null){
toastId = toast('Upload in Progress', {
progress: progress
});
} else {
toast.update(toastId, {
progress: progress
})
}
}
}).then (data => {
// Upload is done!
// The remaining progress bar will be filled up
// The toast will be closed when the transition end
toast.done(toast.id)
})
}
render(){
return (
<div>
<button onClick={this.upload}>Upload something</button>
</div>
);
}
}
When you update a toast, the toast options and the content are inherited but don't worry you can update them.
import React, { Component } from 'react';
import { toast } from 'react-toastify';
class Update extends Component {
toastId = null;
notify = () => this.toastId = toast("Hello", { autoClose: false });
update = () => toast.update(this.toastId, { type: toast.TYPE.INFO, autoClose: 5000 });
render(){
return (
<div>
<button onClick={this.notify}>Notify</button>
<button onClick={this.update}>Update</button>
</div>
)
}
}
If you want to change the content it's straightforward as well. You can render any valid element including a react component. Pass your value to a render option as follow:
// With a string
toast.update(this.toastId, {
render: "New content",
type: toast.TYPE.INFO,
autoClose: 5000
});
// Or with a component
toast.update(this.toastId, {
render: <MyComponent />
type: toast.TYPE.INFO,
autoClose: 5000
});
If you want to update the toastId it can be done. But don't forget to use the new id!
const myNewToastId = 'loremIpsum';
toast.update(this.toastId, {
render: "New content",
type: toast.TYPE.INFO,
autoClose: 5000,
toastId: myNewToastId
});
toast.update(myNewToastId, {
render: <MyComponent />
autoClose: 6000
});
By default, when you update a toast, there is no transition applied. If you want to apply a transition, it can be done via the className or the transition option:
// with css
toast.update(this.toastId, {
render: "New Content",
type: toast.TYPE.INFO,
//Here the magic
className: 'rotateY animated'
})
// with glamor
toast.update(this.toastId, {
render: "New Content",
type: toast.TYPE.INFO,
//Here the magic
className: css({
transform: "rotateY(360deg)",
transition: "transform 0.6s"
})
})
// with transition
toast.update(this.toastId, {
render: "New Content",
type: toast.TYPE.INFO,
//Here the magic
transition: Rotate
})
If you want to inherit props from the ToastContainer, you can reset an option by passing null.
It's particulary useful when you remove the closeButton from a toast and you want it back during the update:
class Update extends Component {
toastId = null;
notify = () => this.toastId = toast("Hello", {
autoClose: false,
closeButton: false // Remove the closeButton
});
update = () => toast.update(this.toastId, {
type: toast.TYPE.INFO,
autoClose: 5000,
closeButton: null // The closeButton defined on ToastContainer will be used
});
render(){
return (
<div>
<button onClick={this.notify}>Notify</button>
<button onClick={this.update}>Update</button>
</div>
)
}
}
You can define two callbacks on toast. They are really useful when the toast are not used only to display messages.
import React, { Component } from 'react';
import { toast } from 'react-toastify';
class Hook extends Component {
notify = () => toast(<MyComponent foo="bar" />, {
onOpen: ({ foo }) => window.alert('I counted to infinity once then..'),
onClose: ({ foo }) => window.alert('I counted to infinity twice')
});
render(){
return <button onClick={this.notify}>Notify</button>;
}
}
If you want to know when a toast is displayed or removed, toast expose a onChange method:
toast.onChange( numberOfToastDisplayed => {
// Do whatever you want
});
You can pass a custom close button to the ToastContainer to replace the default one.
ā ļø When you use a custom close button, your button will receive a closeToast function.
You need to call it in order to close the toast. ā ļø
import React, { Component } from 'react';
import { toast, ToastContainer } from 'react-toastify';
const CloseButton = ({ YouCanPassAnyProps, closeToast }) => (
<i
className="material-icons"
onClick={closeToast}
>
delete
</i>
);
class CustomClose extends Component {
notify = () => {
toast("The close button change when Chuck Norris display a toast");
};
render(){
return (
<div>
<button onClick={this.notify}>Notify</button>;
<ToastContainer closeButton={<CloseButton YouCanPassAnyProps="foo" />} />
</div>
);
}
}
import React, { Component } from 'react';
import { toast } from 'react-toastify';
// Let's use the closeButton we defined on the previous example
class CustomClose extends Component {
notify = () => {
toast("The close button change when Chuck Norris display a toast",{
closeButton: <CloseButton YouCanPassAnyProps="foo" />
});
};
render(){
return <button onClick={this.notify}>Notify</button>;
}
}
Sometimes you don't want to display a close button. It can be removed globally or per toast. Pass
false to closeButton props:
<ToastContainer closeButton={false} />
toast("hello", {
closeButton: false
})
-- if you removed it globally, you can display the default Button per toast (or you can set your custom button)
toast("hello", {
closeButton: true // or <FontAwesomeCloseButton />
})
See it in action:
const ToastUndo = ({ id, undo, closeToast }) => {
function handleClick(){
undo(id);
closeToast();
}
return (
<div>
<h3>
Row Deleted <button onClick={handleClick}>UNDO</button>
</h3>
</div>
);
}
class App extends Component {
state = {
collection: data,
// Buffer
toRemove: []
};
// Remove the row id from the buffer
undo = id => {
this.setState({
toRemove: this.state.toRemove.filter(v => v !== id)
});
}
// Remove definetly
cleanCollection = () => this.setState({
// Return element which are not included in toRemove
collection: this.state.collection.filter(v => !this.state.toRemove.includes(v.id)),
//Cleanup the buffer
toRemove: []
});
// Remove row from render process
// then display the toast with undo action available
removeRow = e => {
const id = e.target.dataset.rowId;
this.setState({
toRemove: [...this.state.toRemove, id]
});
toast(<ToastUndo undo={this.undo} id={id} />, {
// hook will be called whent the component unmount
onClose: this.cleanCollection
});
};
renderRows() {
const { collection, toRemove } = this.state;
// Render all the element wich are not present in toRemove
// Im using data-attribute to grab the row id
return collection.filter(v => !toRemove.includes(v.id)).map(v => (
<tr key={v.id}>
<td>{v.firstName}</td>
<td>{v.lastName}</td>
<td>{v.email}</td>
<td>
<button onClick={this.removeRow} data-row-id={v.id}>
Delete
</button>
</td>
</tr>
));
}
render() {
// Dont close the toast on click
return (
<div style={styles}>
<table>
<tbody>
<tr>
<th>name</th>
<th>firstname</th>
<th>gender</th>
<th />
</tr>
{this.renderRows()}
</tbody>
</table>
<ToastContainer closeOnClick={false} />
</div>
);
}
}
There is 4 built-in transitions provided:
Bounce is used by default but you can replace it by your own transition or by one of the list above:
import { Slide, Zoom, Flip, Bounce } from 'react-toastify';
<ToastContainer
transition={Slide}
/>
//...
<ToastContainer
transition={YourCustomTransition}
/>
You get the idea...
The toast relies on react-transition-group for the enter and exit transition. Any transition built with react-transition-group should work !
I'll use the zoom animation from animate.css. Of course, you could create your own animation.
/* style.css*/
@keyframes zoomIn {
from {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
.zoomIn {
animation-name: zoomIn;
}
@keyframes zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
to {
opacity: 0;
}
}
.zoomOut {
animation-name: zoomOut;
}
/* Not needed with the cssTransition helper */
.animate {
animation-duration: 800ms;
}
The easiest way to roll your own transition is by using the cssTransition helper. Doing so you don't need to deal with react-transition-group. You only need to provide the enter and the exit class name, the transition duration is set
to 750ms by default but it can be overridden:
import React, { Component } from 'react';
import { toast, cssTransition } from 'react-toastify';
import './style.css';
const Zoom = cssTransition({
enter: 'zoomIn',
exit: 'zoomOut',
// default to 750ms, can be omitted
duration: 750,
});
class App extends Component {
notify = () => {
toast("ZoomIn and ZoomOut", {
transition: Zoom,
autoClose: 5000
});
};
render(){
return <button onClick={this.notify}>Notify</button>;
}
}
If you want the transition duration to be different between the enter and exit transition pass an array:
import React, { Component } from 'react';
import { toast, cssTransition } from 'react-toastify';
import './style.css';
const Zoom = cssTransition({
enter: 'zoomIn',
exit: 'zoomOut',
duration: [500, 800]
});
class App extends Component {
notify = () => {
toast("ZoomIn and ZoomOut", {
transition: Zoom,
autoClose: 5000
});
};
render(){
return <button onClick={this.notify}>Notify</button>;
}
}
Some transitions are based on the toast position. This is the case for the default one. If you pass appendPosition to the cssTransition helper as shown below, the current position will be appended to the enter and exit class name:
import React, { Component } from 'react';
import { toast, cssTransition } from 'react-toastify';
import './style.css';
const Zoom = cssTransition({
// zoomIn will become zoomIn--top-right or zoomIn--top-left and so on
enter: 'zoomIn',
// zoomIn will become zoomOut--top-right or zoomOut--top-left and so on
exit: 'zoomOut',
// default to false
appendPosition: true
});
class App extends Component {
notify = () => {
toast("ZoomIn and ZoomOut", {
transition: Zoom,
autoClose: 5000
});
};
render(){
return <button onClick={this.notify}>Notify</button>;
}
}
import React, { Component } from 'react';
import { toast } from 'react-toastify';
import Transition from 'react-transition-group/Transition';
import './style.css';
const ZoomInAndOut = ({ children, position, ...props }) => (
<Transition
{...props}
{/* Same as the animation duration */}
timeout={800}
onEnter={ node => node.classList.add('zoomIn', 'animate')}
onExit={node => {
node.classList.remove('zoomIn', 'animate');
node.classList.add('zoomOut', 'animate');
}}
>
{children}
</Transition>
);
class App extends Component {
notify = () => {
toast("ZoomIn and ZoomOut", {
transition: ZoomInAndOut,
autoClose: 5000
});
};
render(){
return <button onClick={this.notify}>Notify</button>;
}
}
You can swipe the toast to remove it:
You need to drag 80% of the toast width to remove it. This can be changed to fit your need:
<ToastContainer draggablePercent={60}>
toast('Hello', {
draggablePercent: 60
});
<ToastContainer draggable={false}>
toast('Hello', {
draggable: false
});
toast("Custom style",{
className: 'black-background',
bodyClassName: "grow-font-size",
progressClassName: 'fancy-progress-bar'
});
import { css } from 'glamor';
toast("Custom style",{
className: css({
background: 'black'
}),
bodyClassName: css({
fontSize: '60px'
}),
progressClassName: css({
background: "repeating-radial-gradient(circle at center, red 0, blue, green 30px)"
})
});
<ToastContainer
className='toast-container'
toastClassName="dark-toast"
progressClassName={css({
height: "2px"
})}
/>
Your app need to support rtl content? Set the rtl props to true:
render(){
return(
{/*Component*/}
<ToastContainer rtl />
{/*Component*/}
);
}
To include the bare minimum required style you can do as follow:
import 'react-toastify/dist/ReactToastify.minimal.css';
On mobile the toast will take all the available width.
| Props | Type | Default | Description |
|---|---|---|---|
| position | string | top-right | One of top-right, top-center, top-left, bottom-right, bottom-center, bottom-left |
| autoClose | false or number | 5000 | Delay in ms to close the toast. If set to false, the notification need to be closed manualy |
| closeButton | React Element or false | - | A React Component to replace the default close button or false to hide the button |
| transition | function | - | A reference to a valid react-transition-group/Transition component |
| hideProgressBar | bool | false | Display or not the progress bar below the toast(remaining time) |
| pauseOnHover | bool | true | Keep the timer running or not on hover |
| pauseOnFocusLoss | bool | true | Pause the timer when the window loses focus |
| rtl | bool | false | Support right to left content |
| closeOnClick | bool | true | Dismiss toast on click |
| newestOnTop | bool | false | Display newest toast on top |
| className | string|object | - | Add optional classes to the container |
| style | object | - | Add optional inline style to the container |
| toastClassName | string|object | - | Add optional classes to the toast |
| bodyClassName | string|object | - | Add optional classes to the toast body |
| progressClassName | string|object | - | Add optional classes to the progress bar |
| progressStyle | object | - | Add optional inline style to the progress bar |
| draggable | bool | true | Allow toast to be draggable |
| draggablePercent | number | 80 | The percentage of the toast's width it takes for a drag to dismiss a toast(value between 0 and 100) |
| enableMultiContainer | bool | - | Enable multi toast container support |
| containerId | string\number | - | Container id used to match toast with the same containerId |
| role | string | alert | Define the ARIA role for the toasts |
All the method of toast return a toastId except dismiss and isActive.
The toastId can be used to remove a toast programmatically or to check if the toast is displayed.
| Parameter | Type | Required | Description |
|---|---|---|---|
| content | string or React Element | ā | Element that will be displayed |
| options | object | ā | Options listed below |
type: Kind of notification. One of "default", "success", "info", "warning", "error". You can use toast.TYPE.SUCCESS and so on to avoid any typo.onOpen: Called inside componentDidMountonClose: Called inside componentWillUnmountautoClose: same as ToastContainer.closeButton: false to disable, a React Component to replace or true to display the default button.transition: same as ToastContainer.closeOnClick: same as ToastContainer.hideProgressBar: same as ToastContainer.position: same as ToastContainerpauseOnHover: same as ToastContainerpauseOnFocusLoss: same as ToastContainerclassName: same as ToastContainer toastClassNamebodyClassName: same as ToastContainerprogressClassName: same as ToastContainerdraggable: same as ToastContainerdraggablePercent: same as ToastContainerrole: same as ToastContainertoastId: optional integer or string to manually set a toastId. If an invalid type is provided a generated toastId will be usedprogress: a value between 0..1 to control the progress barrender: string or React Element, only available when calling updatedelay: a number to let you delay the toast appearancecontainerId: string or number to match a specific Toast containeronClick: Called when click inside Toast notification:warning:ļø Toast options supersede ToastContainer props :warning:
:warning:ļø Manually setting a toastId overwrite automatically generated toastIds :warning:
const Img = ({ src }) => <div><img width={48} src={src} /></div>;
const options = {
onOpen: props => console.log(props.foo),
onClose: props => console.log(props.foo),
autoClose: 6000,
closeButton: <FontAwesomeCloseButton />,
type: toast.TYPE.INFO,
hideProgressBar: false,
position: toast.POSITION.TOP_LEFT,
pauseOnHover: true,
transition: MyCustomTransition,
progress: 0.2
// and so on ...
};
const toastId = toast(<Img foo={bar}/>, options) // default, type: 'default'
toast(({ closeToast }) => <div>Render props like</div>, options);
toast.success("Hello", options) // add type: 'success' to options
toast.info("World", options) // add type: 'info' to options
toast.warn(<Img />, options) // add type: 'warning' to options
toast.error(<Img />, options) // add type: 'error' to options
toast.dismiss() // Remove all toasts !
toast.dismiss(toastId) // Remove given toast
toast.isActive(toastId) //Check if a toast is displayed or not
toast.update(toastId, {
type: toast.TYPE.INFO,
render: <Img foo={bar}/>
});
toast.done(toastId) // completes the controlled progress bar
toast.configure({
autoClose: 8000,
draggable: false,
//same as ToastContainer props
})
toast.useLazyContainer(false) // disable lazy container
| Parameter | Type | Required | Default | Description |
|---|---|---|---|---|
| enter | string | ā | - | The class name that will be used when the toast enter |
| exit | string | ā | - | The class name that will be used when the toast exit |
| duration | number| Array | ā | 750 | The transition duration in ms. |
| appendPosition | bool | ā | false | Append or not the position to the class name: yourClassName--top-right, yourClassName--bottom-left... |
import { cssTransition } from 'react-toastify';
const Zoom = cssTransition({
enter: 'zoomIn',
exit: 'zoomOut',
duration: 750,
appendPosition: false
});
const Zoom = cssTransition({
enter: 'zoomIn',
exit: 'zoomOut',
duration: [500, 600],
appendPosition: false
});
 |  |  |  |  |  |
|---|---|---|---|---|---|
| IE 11+ ā | Latest ā | Latest ā | Latest ā | Latest ā | Latest ā |
You can find the release note for the latest release here
You can browse them all here
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.
Licensed under MIT
FAQs
React notification made easy
We found that react-toastify demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago.Ā It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.