A demo is worth a thousand words
$ npm install react-noti styled-components@5
$ yarn add react-noti styled-components@5
import React from 'react'
// POSITION is a helper variable that provides available position values to avoid typos
import { ReactNoti, notify, POSITION } from 'react-noti'
function App() {
const handleSuccessClick = () => {
notify.success('You can put almost anything here.')
}
const handleInfoClick = () => {
notify.info('Info message', { title: 'Title here' })
}
const handleWarningClick = () => {
notify.warning('Warning message', {
title: 'Do not auto dismiss',
autoDismiss: false,
})
}
const handleErrorClick = () => {
notify.error('Error message', {
title: 'Close after 9000ms',
timeOut: 9000,
})
}
return (
<div className="App">
<ReactNoti position={POSITION.TOP_RIGHT} />
<div>
<button onClick={handleSuccessClick}>Success!</button>
<button onClick={handleInfoClick}>Info!</button>
<button onClick={handleWarningClick}>Warning!</button>
<button onClick={handleErrorClick}>Error!</button>
</div>
</div>
)
}
export default App
Props | Type | Default | Required | Description |
---|---|---|---|---|
position |
string |
top-right |
✘ | Defines location of the ReactNoti component on the screen. Available options: top-right, top-left, top-center, bottom-right, bottom-left, bottom-center . |
autoDismiss |
boolean |
true |
✘ | Auto dismisses notification after the timeOut . Can be overridden individually. |
timeOut |
number |
5000 |
✘ | The default time in ms for the all toast notifications in the container tray. Can be overridden individually. |
single |
boolean |
false |
✘ | Single notification mode. Show only the last notification. |
icons |
boolean |
true |
✘ | Show default toast notifications icons or not. |
pauseOnHover |
boolean |
true |
✘ | Pause auto-dismissing countdown on mouse hover. Can be overridden individually. |
showProgress |
boolean |
true |
✘ | Show countdown progress-bar on toast notifications. Can be overridden individually. |
className |
string |
undefined |
✘ | Adds a class to the ReactNoti container for custom styling. |
Params | Type | Default | Required | Description |
---|---|---|---|---|
content |
string | element |
- | ✓ | A text string or a component containing the content of the Toast notification. |
options |
object |
{} |
✘ | Options are listed bellow. |
Options | Type | Default | Description |
---|---|---|---|
title |
string |
undefined |
Text string containing the title of the Toast notification. |
autoDismiss |
boolean |
true |
Auto dismiss notification after the timeOut . Overrides global ReactNoti autoDismiss. |
timeOut |
number |
5000 |
Time in ms for individual Toast in the tray. Overrides global ReactNoti timeOut. |
pauseOnHover |
boolean |
true |
Pause auto-dismissing countdown on mouse hover. Overrides global ReactNoti pauseOnHover. |
showProgress |
boolean |
false |
Show countdown progress-bar on toast notifications. Overrides global ReactNoti showProgress. |
const Img = ({ src }) => <span><img width={48} src={src} /></span>
const options = {
title: 'Toast title'
autoDismiss: true,
timeOut: 5000,
pauseOnHover: true,
showProgress: false
}
// Success.
notify.success('Hello')
// Info. Pass optional params that overwrites the default ones
notify.info('World', options)
// Warning. Passes React Component as a message content
notify.warning(<Img />)
// Error. Passes optional param that disables toast auto dismiss
notify.error('Oops!', { autoDismiss: false })
// Removes all toasts!
notify.closeAll()