1117 lines
32 KiB
Markdown
1117 lines
32 KiB
Markdown
# React Toastify [](https://travis-ci.org/fkhadra/react-toastify) []() []() []() [](https://coveralls.io/github/fkhadra/react-toastify?branch=master)
|
||
|
||
|
||
|
||
|
||
🎉 React-Toastify allow you to add notification to your app with ease. No bullshit !
|
||
|
||
* [Demo](#demo)
|
||
* [Installation](#installation)
|
||
* [Features](#features)
|
||
* [Migrate from v2 to v3](#migrate-from-v2-to-v3)
|
||
* [Usage](#usage)
|
||
+ [One component to rule them all](#one-component-to-rule-them-all)
|
||
+ [Positioning toast](#positioning-toast)
|
||
+ [Set autoclose delay or disable it](#set-autoclose-delay-or-disable-it)
|
||
+ [Render a component](#render-a-component)
|
||
+ [Remove a toast programmatically](#remove-a-toast-programmatically)
|
||
+ [Prevent duplicate](#prevent-duplicate)
|
||
+ [Update a toast](#update-a-toast)
|
||
- [Basic example](#basic-example)
|
||
- [Update the content](#update-the-content)
|
||
- [ :sparkles: Apply a transition](#apply-a-transition)
|
||
- [Reset option or inherit from ToastContainer](#reset-option-or-inherit-from-ToastContainer)
|
||
+ [Define hook](#define-hook)
|
||
+ [Set a custom close button or simply remove it](#set-a-custom-close-button-or-simply-remove-it)
|
||
- [Override the default one](#override-the-default-one)
|
||
- [Define it per toast](#define-it-per-toast)
|
||
- [Remove it](#remove-it)
|
||
+ [Add an undo option to a toast](#add-an-undo-option-to-a-toast)
|
||
+ [ :sparkles: Define a custom enter and exit transition](#define-a-custom-enter-and-exit-transition)
|
||
+ [Le style](#le-style)
|
||
- [Replace default style](#replace-default-style)
|
||
- [Style with className](#style-with-classname)
|
||
+ [Mobile](#mobile)
|
||
* [Api](#api)
|
||
+ [ToastContainer](#toastcontainer)
|
||
+ [toast](#toast)
|
||
* [Browser Support](#browser-support)
|
||
* [Release Notes](#release-notes)
|
||
* [Contribute](#contribute)
|
||
* [License](#license)
|
||
|
||
## Demo
|
||
|
||
[A demo is worth thousand word](https://fkhadra.github.io/react-toastify/)
|
||
|
||
## Installation
|
||
|
||
```
|
||
$ npm install --save react-toastify
|
||
$ yarn add react-toastify
|
||
```
|
||
|
||
## Features
|
||
|
||
- Easy to setup for real, you can make it works in less than 10sec !
|
||
- Super easy to customize
|
||
- Can display a react component inside the toast !
|
||
- Don't rely on `findDOMNode` or any DOM hack
|
||
- 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
|
||
- Use glamor for styling 💅
|
||
- Pause toast when the browser is not visible thanks to visibility api
|
||
- Fancy progress bar to display the remaining time
|
||
- Possibility to update a toast
|
||
|
||
## Migrate from v2 to v3
|
||
|
||
The v3 rely on glamor for styling. Using css classes is still fine but
|
||
you may need to replace your css classes by a glamor rule in some case.
|
||
|
||
No more css file to import !
|
||
|
||
A style helper has been added to mimic the old sass variables.
|
||
|
||
## Usage
|
||
|
||
### One component to rule them all
|
||
|
||
By default all toasts will inherits ToastContainer's props. **Props defined on toast supersede ToastContainer's props.**
|
||
|
||
```javascript
|
||
import React, { Component } from 'react';
|
||
import { ToastContainer, toast } from 'react-toastify';
|
||
|
||
class App extends Component {
|
||
notify = () => toast("Wow so easy !");
|
||
|
||
render(){
|
||
return (
|
||
<div>
|
||
<button onClick={this.notify}>Notify !</button>
|
||
<ToastContainer />
|
||
</div>
|
||
);
|
||
}
|
||
}
|
||
```
|
||
|
||
### Positioning toast
|
||
|
||
By default all the toasts will be positionned 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.
|
||
|
||
```javascript
|
||
// 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';
|
||
import { css } from 'glamor';
|
||
|
||
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 !", {
|
||
position: toast.POSITION.BOTTOM_RIGHT,
|
||
className: css({
|
||
background: "black"
|
||
})
|
||
});
|
||
};
|
||
|
||
render(){
|
||
return <button onClick={this.notify}>Notify</button>;
|
||
}
|
||
}
|
||
```
|
||
|
||
### Set autoclose delay or disable it
|
||
|
||
- Set the default delay
|
||
|
||
```js
|
||
import React from 'react';
|
||
import { ToastContainer } from 'react-toastify';
|
||
|
||
// close toast after 8 seconds
|
||
const App = () => (
|
||
<ToastContainer autoClose={8000} />
|
||
);
|
||
```
|
||
|
||
- Set the delay per toast for more control
|
||
|
||
```js
|
||
import React from 'react';
|
||
import { ToastContainer, toast } from 'react-toastify';
|
||
|
||
class App extends Component {
|
||
closeAfter15 = () => toast("YOLO", { autoClose: 15000 });
|
||
|
||
closeAfter7 = () => toast("7 Kingdoms", { autoClose: 15000 })
|
||
|
||
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>
|
||
);
|
||
}
|
||
}
|
||
```
|
||
|
||
- Disable it by default
|
||
|
||
```js
|
||
{/* Some components */}
|
||
<ToastContainer autoClose={false} />
|
||
{/* Some components */}
|
||
```
|
||
|
||
- Disable it per toast
|
||
|
||
```js
|
||
{/* Some components */}
|
||
toast("hello", {
|
||
autoClose: false
|
||
})
|
||
{/* Some components */}
|
||
```
|
||
|
||
### Render a component
|
||
|
||
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.
|
||
|
||
```js
|
||
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>
|
||
);
|
||
```
|
||
|
||
Use could also render a component using a function. More or less like a "render props":
|
||
|
||
```js
|
||
toast(({ closeToast }) => <div>Functional swag 😎</div>);
|
||
```
|
||
|
||
### Remove a toast programmatically
|
||
|
||
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.
|
||
|
||
```javascript
|
||
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>
|
||
);
|
||
}
|
||
}
|
||
```
|
||
|
||
### Prevent duplicate
|
||
|
||
To prevent duplicates, you can check if a given toast is active by calling `toast.isActive(id)` like the snippet below. With this approach, you can decide with more precision whether or not you want to display a toast.
|
||
|
||
```javascript
|
||
import React, { Component } from 'react';
|
||
import { toast } from 'react-toastify';
|
||
|
||
class Example extends Component {
|
||
toastId = null;
|
||
|
||
notify = () => {
|
||
if (! toast.isActive(this.toastId)) {
|
||
this.toastId = toast("I cannot be duplicated !");
|
||
}
|
||
}
|
||
|
||
render(){
|
||
return (
|
||
<div>
|
||
<button onClick={this.notify}>Notify</button>
|
||
</div>
|
||
);
|
||
}
|
||
}
|
||
```
|
||
|
||
### Update a toast
|
||
|
||
When you update a toast, the toast options and the content are inherited but don't worry you can update them.
|
||
|
||
|
||
|
||
#### Basic example
|
||
|
||
```js
|
||
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>
|
||
)
|
||
}
|
||
}
|
||
```
|
||
|
||
#### Update the content
|
||
|
||
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:
|
||
|
||
```js
|
||
// 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
|
||
});
|
||
|
||
|
||
```
|
||
|
||
#### Apply a transition
|
||
|
||
By default, when you update a toast, there is no transition applied. You can easily change this behavior by taking advantage of the `className` option. Lets rotate the toast on update:
|
||
|
||
|
||
|
||
```js
|
||
toast.update(this.toastId, {
|
||
render: "New Content",
|
||
type: toast.TYPE.INFO,
|
||
//Here the magic
|
||
className: css({
|
||
transform: "rotateY(360deg)",
|
||
transition: "transform 0.6s"
|
||
})
|
||
})
|
||
```
|
||
|
||
#### Reset option or inherit from ToastContainer
|
||
|
||
If you want to inherit props from the `ToastContainer`, you can reset an option by passing null.
|
||
It's particulary usefull when you remove the `closeButton` from a toast and you want it back during the update:
|
||
|
||
```js
|
||
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>
|
||
)
|
||
}
|
||
}
|
||
```
|
||
|
||
### Define hook
|
||
|
||
You can define two hooks on toast. Hooks are really useful when the toast are not used only to display messages.
|
||
|
||
- onOpen is called inside componentDidMount
|
||
- onClose is called inside componentWillUnmount
|
||
|
||
```javascript
|
||
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>;
|
||
}
|
||
}
|
||
```
|
||
|
||
### Set a custom close button or simply remove it
|
||
|
||
#### Override the default one
|
||
|
||
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.** ⚠️
|
||
|
||
```javascript
|
||
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>
|
||
);
|
||
}
|
||
}
|
||
```
|
||
|
||
#### Define it per toast
|
||
|
||
```javascript
|
||
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>;
|
||
}
|
||
}
|
||
```
|
||
|
||
#### Remove it
|
||
|
||
Sometimes you don't want to display a close button. It can be removed globally or per toast. Simply pass
|
||
`false` to `closeButton` props:
|
||
|
||
- remove it by default
|
||
|
||
```js
|
||
{/* Some components */}
|
||
<ToastContainer closeButton={false} />
|
||
{/* Some components */}
|
||
```
|
||
|
||
- remove it per toast
|
||
|
||
```js
|
||
{/* Some components */}
|
||
toast("hello", {
|
||
closeButton: false
|
||
})
|
||
{/* Some components */}
|
||
```
|
||
|
||
### Add an undo option to a toast
|
||
|
||
See it in action:
|
||
|
||
[](https://codesandbox.io/s/l2qkywz7xl)
|
||
|
||
```javascript
|
||
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>
|
||
);
|
||
}
|
||
}
|
||
```
|
||
|
||
### Define a custom enter and exit transition
|
||
|
||
The toast rely on `react-transition-group` for the enter and exit transition.
|
||
|
||
|
||
|
||
I'll use the zoom animation from animate.css. Of course, you could create the animation using glamor.
|
||
|
||
```css
|
||
/* 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;
|
||
}
|
||
|
||
.animate{
|
||
animation-duration: 800ms;
|
||
}
|
||
```
|
||
|
||
- Create a transition and apply it
|
||
|
||
```js
|
||
import React, { Component } from 'react';
|
||
import { toast } from 'react-toastify';
|
||
import Transition from 'react-transition-group/Transition';
|
||
import './style.css';
|
||
|
||
// Any transition created with react-transition-group/Transition will work !
|
||
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>;
|
||
}
|
||
}
|
||
|
||
```
|
||
|
||
- Or pass your transition to the ToastContainer to replace the default one.
|
||
|
||
```js
|
||
render(){
|
||
return(
|
||
{/*Component*/}
|
||
<ToastContainer
|
||
transition={ZoomInAndOut}
|
||
/>
|
||
{/*Component*/}
|
||
);
|
||
}
|
||
```
|
||
|
||
### Le style
|
||
|
||
#### Replace default style
|
||
|
||
You could use the style helper to replace the variable listed below:
|
||
|
||
```javascript
|
||
import { style } from "react-toastify";
|
||
|
||
style({
|
||
width: "320px",
|
||
colorDefault: "#fff",
|
||
colorInfo: "#3498db",
|
||
colorSuccess: "#07bc0c",
|
||
colorWarning: "#f1c40f",
|
||
colorError: "#e74c3c",
|
||
colorProgressDefault: "linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55)",
|
||
mobile: "only screen and (max-width : 480px)",
|
||
fontFamily: "sans-serif",
|
||
zIndex: 9999,
|
||
TOP_LEFT: {
|
||
top: '1em',
|
||
left: '1em'
|
||
},
|
||
TOP_CENTER: {
|
||
top: '1em',
|
||
marginLeft: `-${320/2}px`,
|
||
left: '50%'
|
||
},
|
||
TOP_RIGHT: {
|
||
top: '1em',
|
||
right: '1em'
|
||
},
|
||
BOTTOM_LEFT: {
|
||
bottom: '1em',
|
||
left: '1em'
|
||
},
|
||
BOTTOM_CENTER: {
|
||
bottom: '1em',
|
||
marginLeft: `-${320/2}px`,
|
||
left: '50%'
|
||
},
|
||
BOTTOM_RIGHT: {
|
||
bottom: '1em',
|
||
right: '1em'
|
||
}
|
||
});
|
||
```
|
||
|
||
#### Style with className
|
||
|
||
All className like props can be a css class or a glamor rule, or a css-in-js object.
|
||
|
||
⚠️ Use a glamor rule rather than a css class when you want to override a property cause glamor stylesheet
|
||
will be injected last ⚠️
|
||
|
||
```javascript
|
||
import React, { Component } from 'react';
|
||
import { toast } from 'react-toastify';
|
||
import { css } from 'glamor';
|
||
|
||
class Style extends Component {
|
||
notify = () => {
|
||
toast("Dark style notification with default type progress bar",{
|
||
// css-in-js
|
||
className: {
|
||
background: "black"
|
||
},
|
||
// css class
|
||
bodyClassName: "grow-font-size"
|
||
});
|
||
|
||
toast("Fancy progress bar.",{
|
||
// glamor rule
|
||
progressClassName: css({
|
||
background: "repeating-radial-gradient(circle at center, red 0, blue, green 30px)"
|
||
})
|
||
});
|
||
};
|
||
|
||
render(){
|
||
return <button onClick={this.notify}>Notify</button>;
|
||
}
|
||
}
|
||
```
|
||
|
||
You could define your style globally:
|
||
|
||
|
||
```javascript
|
||
render(){
|
||
return(
|
||
{/*Component*/}
|
||
<ToastContainer
|
||
className={{
|
||
color: "black"
|
||
}}
|
||
toastClassName="dark-toast"
|
||
progressClassName={css({
|
||
height: "2px"
|
||
})}
|
||
/>
|
||
{/*Component*/}
|
||
);
|
||
}
|
||
```
|
||
|
||
### Mobile
|
||
|
||
On mobile the toast will take all the width available.
|
||
|
||
|
||
|
||
## Api
|
||
|
||
### ToastContainer
|
||
|
||
| 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 int | 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 |
|
||
| closeOnClick | bool | true | Dismiss toast on click |
|
||
| newestOnTop | bool | false | Display newest toast on top |
|
||
| className | string\|glamor rule | - | Add optional classes to the container |
|
||
| style | object | - | Add optional inline style to the container |
|
||
| toastClassName | string\|glamor rule | - | Add optional classes to the toast |
|
||
| bodyClassName | string\|glamor rule | - | Add optional classes to the toast body |
|
||
| progressClassName | string\|glamor rule | - | Add optional classes to the progress bar |
|
||
|
||
|
||
### toast
|
||
|
||
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 | ✘ | Possible keys : autoClose, type, closeButton, hideProgressBar | |
|
||
|
||
- Available options :
|
||
- `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 componentDidMount
|
||
- `onClose`: Called inside componentWillUnmount
|
||
- `autoClose`: same as ToastContainer.
|
||
- `closeButton`: same as ToastContainer.
|
||
- `transition`: same as ToastContainer.
|
||
- `closeOnClick`: same as ToastContainer.
|
||
- `hideProgressBar`: same as ToastContainer.
|
||
- `position`: same as ToastContainer
|
||
- `pauseOnHover`: same as ToastContainer
|
||
- `className`: same as ToastContainer toastClassName
|
||
- `bodyClassName`: same as ToastContainer
|
||
- `progressClassName`: same as ToastContainer
|
||
- `render`: string or React Element, only available when calling update
|
||
|
||
:warning:️ *Toast options supersede ToastContainer props* :warning:
|
||
|
||
```javascript
|
||
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
|
||
};
|
||
|
||
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}/>
|
||
});
|
||
```
|
||
|
||
## Browser Support
|
||
|
||
 |  |  |  |  | 
|
||
--- | --- | --- | --- | --- | --- |
|
||
IE 11+ ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
|
||
|
||
## Release Notes
|
||
### V3.3.4
|
||
|
||
- `toast.update` run now at the end of the call stack. For more details, check [issue #135](https://github.com/fkhadra/react-toastify/issues/135)
|
||
|
||
### V3.3.3
|
||
|
||
- Clean animation on entered. This was preventing any update transition to works.
|
||
|
||
### V3.3.1
|
||
|
||
- Fix height [issue #124](https://github.com/fkhadra/react-toastify/issues/124)
|
||
- Update typescript definition
|
||
|
||
### V3.3.0
|
||
|
||
- Better accessibility, relate to [issue #121](https://github.com/fkhadra/react-toastify/issues/121)
|
||
- Reviewed exit animation. No more clipping.
|
||
|
||
### V3.2.2
|
||
|
||
- Add comment to typescript definition.
|
||
|
||
### V3.2.1
|
||
|
||
- Fix typescript definition. Relate to [issue #110](https://github.com/fkhadra/react-toastify/issues/110)
|
||
|
||
### V3.2.0
|
||
|
||
- Allow "render props" rendering. Relate to [issue #106](https://github.com/fkhadra/react-toastify/issues/106)
|
||
- Can set fontFamily via the style helper. Relate to [issue #107](https://github.com/fkhadra/react-toastify/issues/107)
|
||
- Can override position default values via style helper. Realte to [issue #108](https://github.com/fkhadra/react-toastify/issues/108)
|
||
|
||
### V3.1.2
|
||
- Fix [issue #103](https://github.com/fkhadra/react-toastify/issues/103) for real...
|
||
- Fix [issue #104](https://github.com/fkhadra/react-toastify/issues/104) Incorrect TS definition for `toast.dismiss`
|
||
|
||
### V3.1.1
|
||
|
||
- Fix [issue #103](https://github.com/fkhadra/react-toastify/issues/103)
|
||
|
||
### V3.1.0
|
||
|
||
- Add ability to update an existing toast
|
||
- Allow to define the zIndex via the style helper
|
||
- Get rid of all inline style
|
||
|
||
### V3.0.0
|
||
|
||
- Switched to styled component with glamor
|
||
- Added style helper to replace sass variables
|
||
- Test suite improved
|
||
- Typescript definition improved
|
||
|
||
### V2.2.1
|
||
|
||
- Fix [issue #71](https://github.com/fkhadra/react-toastify/issues/71)
|
||
|
||
### V2.2.0
|
||
|
||
- Sass variables are now namespaced
|
||
|
||
### V2.1.7
|
||
|
||
- Can now use [sass variable default](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#Variable_Defaults___default) thanks to [vikpe](https://github.com/vikpe)
|
||
### V2.1.5
|
||
|
||
- Test suites improved
|
||
|
||
### V2.1.4
|
||
|
||
- Fix broken typescript dependencies
|
||
|
||
### V2.1.3
|
||
|
||
- Added typescript definition
|
||
- Toast will pause when page is not visible thanks to page visibility api.
|
||
|
||
### V2.1.2
|
||
|
||
- Previous version was breaking compatibility with react < 16
|
||
### V2.1.1
|
||
|
||
#### Bugfix
|
||
|
||
- Remove toast from react dom when not displayed. Because of that the `onClose` callback on the toast was never called. Relate to [issue #50](https://github.com/fkhadra/react-toastify/issues/50)
|
||
|
||
### V2.1.0
|
||
|
||
#### New Features
|
||
|
||
- Can set a custom transition when the toat enter and exit the screen :sparkles:
|
||
|
||
#### Others
|
||
|
||
- Upgrade to react v16
|
||
- Upgrade to enzyme v3
|
||
- Switched to react-app preset for eslint
|
||
- Upgrade to webpack v3
|
||
- Upgrade to react-transition-group v2
|
||
|
||
|
||
### V2.0.0
|
||
|
||
This version may introduce breaking changes due to redesign. My apologies.
|
||
|
||
But, it brings a lots of new and exciting features !
|
||
|
||
#### New Features
|
||
|
||
- The default design has been reviewed. The component is now usable out of the box without the need to touch the css. Relate to [issue #28](https://github.com/fkhadra/react-toastify/issues/28)
|
||
- The toast timer can keep running on hover. [issue #33](https://github.com/fkhadra/react-toastify/issues/33)
|
||
- Added a possibility to check if a given toast is displayed or not. By using that method we can prevent duplicate. [issue #3](https://github.com/fkhadra/react-toastify/issues/3)
|
||
- Can decide to close the toast on click
|
||
- Can show newest toast on top
|
||
- Can define additionnal className for toast[issue #21](https://github.com/fkhadra/react-toastify/issues/21)
|
||
- Much more mobile ready than the past
|
||
|
||
#### Bug Fixes
|
||
|
||
- The space in of left boxes from window & right boxes from window is different.[issue #25](https://github.com/fkhadra/react-toastify/issues/25)
|
||
- Partial support of ie11. I still need to fix the animation but I need a computer with ie11 for that xD [issue #26](https://github.com/fkhadra/react-toastify/issues/26)
|
||
|
||
### v1.7.0
|
||
|
||
#### New Features
|
||
|
||
- Toast can now be positioned individually !
|
||
|
||
### v1.6.0
|
||
|
||
#### New Features
|
||
|
||
- Can now remove a toast programmatically. When you display a toast, the function return a **toastId**. You can use it
|
||
as follow to remove a given toast `toast.dismiss(toastId)`
|
||
- If the container is not mounted, the notification will be added to a queue and dispatched as soon as the container is mounted.
|
||
For more details check [issue #4](https://github.com/fkhadra/react-toastify/issues/4)
|
||
|
||
#### Others
|
||
|
||
- Added --no-idents flag to cssnano to avoid animation name collision with others libs.
|
||
- Tests are no longer transpiled
|
||
|
||
### v1.5.0
|
||
|
||
- That version does not bring any features but it brings tests made with the amazing jest and aslo Travis CI integration.
|
||
|
||
### v1.4.3
|
||
|
||
- React and react-dom are now peer dependencies
|
||
|
||
### v1.4.2
|
||
|
||
- Don't try to pass down the props when we render a string like so : `toast(<div>hello</div>)`
|
||
|
||
#### Bug fix
|
||
|
||
- Fixed the test to check if the toast can be rendered
|
||
|
||
### v1.4.0
|
||
|
||
- React v16 ready : moving to prop-types and react-transition-group
|
||
- Internal rewrite of components. The implementation wasn't bad but it wasn't good either. A better props validation has been added has well.
|
||
- Removed useless dependencies. I was using the Object.values polyfill when a one line forEach can do the same is my case.
|
||
- Now I believe it's even easier to style the components. The sass sources files are now included when you install the package via yarn or npm
|
||
- The default close button has been replaced.
|
||
|
||
#### New Features
|
||
|
||
- A progress bar is now visible to track the remaining time before the notification is closed. Of course if you don't like it, you are free to disable it.
|
||
- You can choose to display a close button or not.
|
||
- Event pointer is set to none to avoid losing pointer events on everything beneath the toast container when no toast are displayed
|
||
- The `closeToast` callback is also passed down to your component.
|
||
|
||
### v1.3.0
|
||
|
||
- PropTypes package update
|
||
- Dead code elimination
|
||
|
||
#### New Features
|
||
|
||
- Possibility to use a custom close button. Check the api docs of ToastContainer and toast.
|
||
|
||
### v1.2.2
|
||
|
||
I was storing react component into state which is a bad practice. [What should Go in State](http://web.archive.org/web/20150419023006/http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html)
|
||
This is no more the case now. The separation of concern between the data and the view is respected.
|
||
|
||
#### Bug fix
|
||
|
||
- Was calling cloneElement on undefined which cause your console bleed. See issue [#2](https://github.com/fkhadra/react-toastify/issues/2)
|
||
|
||
|
||
### v1.2.1
|
||
|
||
#### Bug fix
|
||
|
||
- Added Object.values polyfill otherwise won't work with IE or EDGE. I ♥ IE.
|
||
|
||
### v1.1.1
|
||
|
||
#### Bug fix
|
||
|
||
- OnClose and OnOpen can access all the props passed to the component. Before
|
||
only the props passed using toast options were accessible
|
||
|
||
#### New Features
|
||
|
||
- Passing prop using toast option will be removed at the next release. It doesn't
|
||
make sense to keep both way to pass props. Use the react way instead
|
||
|
||
### v1.1.0
|
||
|
||
#### New Features
|
||
|
||
- Added onOpen callback
|
||
- Added onClose callback
|
||
|
||
## Contribute
|
||
|
||
Show your ❤️ and support by giving a ⭐. Any suggestions and pull request are welcome !
|
||
|
||
## License
|
||
|
||
Licensed under MIT
|