{"id":16715104,"url":"https://github.com/dean177/with-notification-system","last_synced_at":"2026-04-06T04:32:31.025Z","repository":{"id":79229364,"uuid":"98747049","full_name":"Dean177/with-notification-system","owner":"Dean177","description":"Create notifications from your react components","archived":false,"fork":false,"pushed_at":"2018-08-10T01:39:03.000Z","size":4935,"stargazers_count":6,"open_issues_count":13,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-08T23:03:56.167Z","etag":null,"topics":["higher-order-component","javascript","notifications","react","react-notification-system","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Dean177.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":"License","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-07-29T17:01:32.000Z","updated_at":"2019-11-08T13:43:53.000Z","dependencies_parsed_at":"2023-03-29T19:04:21.744Z","dependency_job_id":null,"html_url":"https://github.com/Dean177/with-notification-system","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Dean177/with-notification-system","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dean177%2Fwith-notification-system","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dean177%2Fwith-notification-system/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dean177%2Fwith-notification-system/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dean177%2Fwith-notification-system/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Dean177","download_url":"https://codeload.github.com/Dean177/with-notification-system/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dean177%2Fwith-notification-system/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31460100,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-05T21:22:52.476Z","status":"online","status_checked_at":"2026-04-06T02:00:07.287Z","response_time":112,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["higher-order-component","javascript","notifications","react","react-notification-system","typescript"],"created_at":"2024-10-12T21:08:23.198Z","updated_at":"2026-04-06T04:32:31.006Z","avatar_url":"https://github.com/Dean177.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# with-notification-system\n\n[![CircleCI](https://circleci.com/gh/Dean177/with-notification-system.svg?style=shield)](https://circleci.com/gh/Dean177/with-notification-system)\n[![codecov](https://codecov.io/gh/Dean177/with-notification-system/branch/master/graph/badge.svg)](https://codecov.io/gh/Dean177/with-notification-system)\n[![Npm](https://badge.fury.io/js/with-notification-system.svg)](https://www.npmjs.com/package/with-notification-system)\n[![Greenkeeper badge](https://badges.greenkeeper.io/Dean177/with-notification-system.svg)](https://greenkeeper.io/)\n\nProvides [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).\n\n## Installation\n\n`yarn add with-notifications-system`\n\n[![Demo image](example/demo.gif)](https://dean177.github.io/with-notification-system/)\n\n\n## Usage\n\nCheck 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\n\n## Quick-start\n\nWrap your app in a `\u003cNotificationSystemProvider /\u003e`\n```javascript\n// index.js\nimport { render } from 'react-dom';\nimport { withNotificationSystem } from 'with-notification-system';\nimport App from './App';\n\nconst rootElement = document.getElementById('root');\n\nrender(\u003cNotificationSystemProvider\u003e\u003cApp /\u003e\u003c/NotificationSystemProvider\u003e, rootElement);\n```\n\nThen anywhere you want a component to be able to create notifications\n```javascript\n// SuccessButton.js\nimport React from 'react';\nimport { withNotifications } from 'with-notification-system';\n\nexport class SuccessButton extends React.Component {\n  handleClick = () =\u003e\n    this.props.notification.add({ title: 'Success 🎉' });\n\n  render() {\n    return \u003cbutton onClick={this.handleClick}\u003eSucceed\u003c/button\u003e\n  }\n}\n\nexport default withNotificationSystem(SuccessButton)\n```\n\n## NotificationSystemProvider Props\n\n| Name         | Type            | Default   | Description |\n|------------  |---------------  |---------- |-----------  |\n| className | `string or undefined` | 'NotificationSystemProvider' | Provide an alternate class to the wrapping div which gets created                                                                                                                                                  |\n| noAnimation | boolean | false | Disable animations |\n| style | object | - | provide inline styles to override all css |\n\n## Notification options\n\nCheck 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\n\n\n## Motivation\n\n`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 🎉.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdean177%2Fwith-notification-system","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdean177%2Fwith-notification-system","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdean177%2Fwith-notification-system/lists"}