React Notification

Primitives to build your growls and dreams.

How It Works

This library uses the render props pattern. You can read more about it here.

Installation

npm install @srph/react-notification --save

Script tags

If you're not using a bundler like Browserify or Webpack, simply add the script tag after your React script tag.

<!-- Script tags for React and other libraries -->
<script src="https://unpkg.com/@srph/react-notification/dist/react-notification.min.js"></script>

This library is exposed as ReactNotification (e.g., <ReactNotification.Notification /> and ReactNotification.notify()).

Usage

import React from 'react'
import {Notification, notify} from '@srph/react-notification'

class App extends React.Component {
  render() {
    return (
      <div>
        <button onClick={() => notify({ text: 'Spawn something' })}>
          Go, go!
        </button>

        <Notification>
          {({items, onClose}) => (
            items.map(item => (
              <div className='item' key={item}>
                {item.text}
                <button onClick={() => onClose(item.id)}>Close</button>
              </div>
            ))
          )}
        </Notification>
      </div>
    )
  }
}

export default App;

API Documentation

Here's a list of props you may use to customize the component for your use-case:

<Notification /> Render Props

| Parameter | Type | Description | | ----- | ---- | ----------- | | items | array (<Item>) | Array containing the notifications. | | onClose | function(id: Number) | Removes the specific notification. Expects the id of an item. |

Item

{
  id: Number,
  text: String,
  timeout: Number
}

notify(opts: object)

Used to spawn a new notification.

| Parameter | Type | Description | | ----- | ---- | ----------- | | opts.text | string (required) | The text of the notification. | | opts.timeout | number | Number of milliseconds before the toast is removed. Defaults to 10000 |

Tip: You can do notify('Hello') which is the same as notify({ text: 'Hello' }).

Setup

You can check the demo, or build it yourself locally:

npm install
npm run start

Afterwards, open up localhost:9001 in your browser.

Bundling package

npm run bundle

Publish storybook

npm run storybook:publish