React-noti NPM

Demo

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.

:warning:️ Toast options supersede ReactNoti container props :warning:

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