@srph/react-notification v0.1.1

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

Item

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

notify(opts: object)

Used to spawn a new notification.

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