https://github.com/dean177/with-notification-system

Create notifications from your react components
https://github.com/dean177/with-notification-system

higher-order-component javascript notifications react react-notification-system typescript

Last synced: 4 months ago
JSON representation

Create notifications from your react components

• Host: GitHub
• URL: https://github.com/dean177/with-notification-system
• Owner: Dean177
• License: mit
• Created: 2017-07-29T17:01:32.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2018-08-10T01:39:03.000Z (almost 8 years ago)
• Last Synced: 2025-07-08T23:03:56.167Z (about 1 year ago)
• Topics: higher-order-component, javascript, notifications, react, react-notification-system, typescript
• Language: TypeScript
• Homepage:
• Size: 4.71 MB
• Stars: 6
• Watchers: 1
• Forks: 0
• Open Issues: 13
• Metadata Files:
  • Readme: Readme.md
  • License: License

Awesome Lists containing this project

README

          
# with-notification-system

[![CircleCI](https://circleci.com/gh/Dean177/with-notification-system.svg?style=shield)](https://circleci.com/gh/Dean177/with-notification-system)

[![codecov](https://codecov.io/gh/Dean177/with-notification-system/branch/master/graph/badge.svg)](https://codecov.io/gh/Dean177/with-notification-system)

[![Npm](https://badge.fury.io/js/with-notification-system.svg)](https://www.npmjs.com/package/with-notification-system)

[![Greenkeeper badge](https://badges.greenkeeper.io/Dean177/with-notification-system.svg)](https://greenkeeper.io/)

Provides [react-notification-system](https://github.com/igorprado/react-notification-system) as a [higher-order-component](https://facebook.github.io/react/docs/higher-order-components.html).

## Installation

`yarn add with-notifications-system`

[![Demo image](example/demo.gif)](https://dean177.github.io/with-notification-system/)

## Usage

Check out the [live documentation](https://dean177.github.io/with-notification-system/) and the [example](https://github.com/Dean177/with-url-state/tree/master/example) directory

## Quick-start

Wrap your app in a ``

```javascript

// index.js

import { render } from 'react-dom';

import { withNotificationSystem } from 'with-notification-system';

import App from './App';

const rootElement = document.getElementById('root');

render(, rootElement);

```

Then anywhere you want a component to be able to create notifications

```javascript

// SuccessButton.js

import React from 'react';

import { withNotifications } from 'with-notification-system';

export class SuccessButton extends React.Component {

  handleClick = () =>

    this.props.notification.add({ title: 'Success 🎉' });

  render() {

    return Succeed

  }

}

export default withNotificationSystem(SuccessButton)

```

## NotificationSystemProvider Props

| Name         | Type            | Default   | Description |

|------------  |---------------  |---------- |-----------  |

| className | `string or undefined` | 'NotificationSystemProvider' | Provide an alternate class to the wrapping div which gets created                                                                                                                                                  |

| noAnimation | boolean | false | Disable animations |

| style | object | - | provide inline styles to override all css |

## Notification options

Check out [react-notification-system](https://github.com/igorprado/react-notification-system/blob/master/README.md#creating-a-notification) for details on all of the options you can provide when creating a notification

## Motivation

`react-notification-system` is awesome but it uses the react [context system](https://reactjs.org/docs/context.html) which tightly couples components and results in components which create notifications. By using a higher-order-component we can hide that implementation detail and provide the notification system via props. That means testing is a cinch and you can avoid some boilerplate 🎉.