Toast Notifications made simple.

---

Table of Contents

• Demo
• Installation
• Usage
• API
  • ReactNoti container
  • notify toast options
    • Optional notify methods parameters
• License

Demo

A demo is worth a thousand words

Installation

$ npm install react-noti styled-components@5
$ yarn add react-noti styled-components@5

Usage

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

API

ReactNoti container

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.

notify toast options

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.

Optional notify methods parameters

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.

⚠️️ Toast options supersede ReactNoti container props ⚠️

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()

License

MIT