{"_id":"@alexseitsinger/react-notifications","_rev":"2-0495a70a1ccc5130da405f2d031b6042","name":"@alexseitsinger/react-notifications","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"@alexseitsinger/react-notifications","version":"1.0.0","description":"Display notifications in the DOM","main":"index.js","types":"types/index.d.ts","scripts":{"build:dev":"yarn webpack --config=webpack.config.dev.js","build":"yarn webpack && yarn run build:dev","test":"yarn jest"},"repository":{"type":"git","url":"https://github.com/alexseitsinger/react-notifications.git"},"keywords":[],"author":{"name":"Alex Seitsinger","email":"software@alexseitsinger.com"},"license":"BSD-2-Clause","bugs":{"url":"https://github.com/alexseitsinger/react-notifications/issues"},"homepage":"https://github.com/alexseitsinger/react-notifications","dependencies":{"@babel/runtime-corejs3":"7.8.4","@emotion/core":"10.0.27","@emotion/styled":"10.0.27","core-js":"3.6.4","underscore":"^1.9.2"},"devDependencies":{"@alexseitsinger/eslint-config":"^2.18.0","@babel/core":"7.8.4","@babel/plugin-proposal-class-properties":"7.8.3","@babel/plugin-proposal-export-default-from":"7.8.3","@babel/plugin-proposal-export-namespace-from":"7.8.3","@babel/plugin-syntax-export-default-from":"7.8.3","@babel/plugin-syntax-export-namespace-from":"7.8.3","@babel/plugin-transform-runtime":"7.8.3","@babel/preset-env":"7.8.4","@babel/preset-react":"7.8.3","@babel/preset-typescript":"^7.8.3","@emotion/babel-preset-css-prop":"^10.0.27","@types/enzyme":"^3.10.5","@types/enzyme-adapter-react-16":"^1.0.6","@types/react":"^16.9.22","@types/react-dom":"^16.9.5","@types/underscore":"^1.9.4","@typescript-eslint/eslint-plugin":"^2.20.0","@typescript-eslint/parser":"^2.20.0","babel-core":"7.0.0-bridge.0","babel-jest":"^25.1.0","babel-loader":"8.0.6","babel-plugin-emotion":"^10.0.27","babel-plugin-transform-react-remove-prop-types":"0.4.24","clean-webpack-plugin":"^3.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","eslint":"^6.8.0","eslint-config-prettier":"^6.10.0","eslint-import-resolver-jest":"^3.0.0","eslint-import-resolver-typescript":"^2.0.0","eslint-import-resolver-webpack":"^0.12.1","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.7.0","eslint-plugin-jest-formatting":"^1.2.0","eslint-plugin-node":"^11.0.0","eslint-plugin-package-json":"^0.1.4","eslint-plugin-react":"^7.18.3","eslint-plugin-simple-import-sort":"^5.0.1","jest":"25.1.0","jest-emotion":"^10.0.27","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"16.12.0","react-dom":"^16.12.0","terser-webpack-plugin":"^2.3.5","ts-jest":"^25.2.1","ts-loader":"^6.2.1","typescript":"^3.8.2","wait-for-expect":"^3.0.2","webpack":"4.41.6","webpack-cli":"3.3.11","webpack-node-externals":"1.7.2"},"peerDependencies":{"react":"16.8.6"},"_id":"@alexseitsinger/react-notifications@1.0.0","dist":{"shasum":"85626838f679be097b9d48ecbd1305b307b6bf2e","integrity":"sha512-7Z8Nz3mvZ4x0egxQH7rPpl+QanwAjs6Z3KVlOOxl3ltbVrTkPrctrMpR7MSts12OAOTGD4md0CVwGSmAMBZBQg==","tarball":"https://registry.npmjs.org/@alexseitsinger/react-notifications/-/react-notifications-1.0.0.tgz","fileCount":17,"unpackedSize":427863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVCTJCRA9TVsSAnZWagAAodgQAKA4ZqfF2f/9ttRHDdgt\nknSELcofyc3MlQxSrYrmq3EzsEpixU+bACTctiXlalYL0ulXoJKjqdWoOcjV\nguXJGU7LLrFqJDYBMZY0rd37CFKE9ysmkAbLHrAcYBN1uti7PZF/+9CKEZ8u\nGAvqt0aDmPJdbA0nn5ecDz2H4SMo4cNkOSIZmG2i9B3NvjzYkhVi613SSJn9\n7TQhoNpIOC1oybasf2mAoKU4sjJRI1gmzUKiAqiIzUGi8UF8Gk4LTzaUQ2I7\nVbQeroR0TNGg+uYu47QcYDcSjEexM4TWNmpNHZT/gXGf4vg6h/kfnl5m9Yx6\n7R+kmgKs9MWybXQYZh6SRzQqaCgW7kXllOt8uCb3jJxZaYnsmD1SnJliiN4w\nM+QPssyUaqZGQUo5VWPYulaGkDFHJwP1NcEx0uzZUvpbEcofDi0eiHN17wOR\njF9YhxG4MQZkwt0YsBF3u7Qy8dED4rkFiCvF45Manz3pYcczSwU1u+JH8VMf\nA1EeLksE+QseumcO/lAN5sIQtH8E9/lZ0MZMfdzLDt/VH29HaWRB9lyDD6Xg\nh8CYHsaEMWz8b3MKmKCsq1IkwFuMTmPlaInNSxcxrbwwM26m/3biuBzrJoe+\ndi2MXhhJEmOo3jHzqV585xaVKYsO5CSTmZ3gj24RYHNU8H48qcgFf470nwTe\no7eq\r\n=bWyL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBspdAlxMTQbPtNNCQ1R9Hh5pxcxgK8RBG51SymSkqTcAiEAioxmBhgb7xP9t3Zz11uBwlIjTU+8ItXVeotk5V4W0xk="}]},"maintainers":[{"name":"alexseitsinger","email":"alexseitsinger@gmail.com"}],"_npmUser":{"name":"alexseitsinger","email":"alexseitsinger@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-notifications_1.0.0_1582572745274_0.6775983860621464"},"_hasShrinkwrap":false},"1.1.0":{"name":"@alexseitsinger/react-notifications","version":"1.1.0","description":"Display notifications in the DOM","main":"index.js","types":"types/index.d.ts","scripts":{"build":"yarn webpack && yarn run build:dev","build:dev":"yarn webpack --config=webpack.config.dev.js","test":"yarn jest"},"repository":{"type":"git","url":"https://github.com/alexseitsinger/react-notifications.git"},"keywords":[],"author":{"name":"Alex Seitsinger","email":"software@alexseitsinger.com"},"license":"BSD-2-Clause","bugs":{"url":"https://github.com/alexseitsinger/react-notifications/issues"},"homepage":"https://github.com/alexseitsinger/react-notifications","dependencies":{"@babel/runtime-corejs3":"7.8.4","@emotion/core":"10.0.27","@emotion/styled":"10.0.27","core-js":"3.6.4","underscore":"^1.9.2"},"devDependencies":{"@alexseitsinger/eslint-config":"^2.18.0","@babel/core":"7.8.4","@babel/plugin-proposal-class-properties":"7.8.3","@babel/plugin-proposal-export-default-from":"7.8.3","@babel/plugin-proposal-export-namespace-from":"7.8.3","@babel/plugin-syntax-export-default-from":"7.8.3","@babel/plugin-syntax-export-namespace-from":"7.8.3","@babel/plugin-transform-runtime":"7.8.3","@babel/preset-env":"7.8.4","@babel/preset-react":"7.8.3","@babel/preset-typescript":"^7.8.3","@emotion/babel-preset-css-prop":"^10.0.27","@types/enzyme":"^3.10.5","@types/enzyme-adapter-react-16":"^1.0.6","@types/react":"^16.9.22","@types/react-dom":"^16.9.5","@types/underscore":"^1.9.4","@typescript-eslint/eslint-plugin":"^2.20.0","@typescript-eslint/parser":"^2.20.0","babel-core":"7.0.0-bridge.0","babel-jest":"^25.1.0","babel-loader":"8.0.6","babel-plugin-emotion":"^10.0.27","babel-plugin-transform-react-remove-prop-types":"0.4.24","clean-webpack-plugin":"^3.0.0","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","eslint":"^6.8.0","eslint-config-prettier":"^6.10.0","eslint-import-resolver-jest":"^3.0.0","eslint-import-resolver-typescript":"^2.0.0","eslint-import-resolver-webpack":"^0.12.1","eslint-plugin-import":"^2.20.1","eslint-plugin-jest":"^23.7.0","eslint-plugin-jest-formatting":"^1.2.0","eslint-plugin-node":"^11.0.0","eslint-plugin-package-json":"^0.1.4","eslint-plugin-react":"^7.18.3","eslint-plugin-simple-import-sort":"^5.0.1","jest":"25.1.0","jest-emotion":"^10.0.27","prettier":"^1.19.1","prettier-eslint":"^9.0.1","react":"16.12.0","react-dom":"^16.12.0","terser-webpack-plugin":"^2.3.5","ts-jest":"^25.2.1","ts-loader":"^6.2.1","typescript":"^3.8.2","wait-for-expect":"^3.0.2","webpack":"4.41.6","webpack-cli":"3.3.11","webpack-node-externals":"1.7.2"},"peerDependencies":{"react":"16.8.6"},"_id":"@alexseitsinger/react-notifications@1.1.0","dist":{"shasum":"a823826075c7d143748487108a2aaf48e8671ac7","integrity":"sha512-hLJt0R5TjHQ02F3R39pV/oBlpEC+KdPZ9OeYTkNMu4hNaU+/V0FHmXTQQ6ztWYGfp0xpVfXJr1is58Od7xi1/A==","tarball":"https://registry.npmjs.org/@alexseitsinger/react-notifications/-/react-notifications-1.1.0.tgz","fileCount":17,"unpackedSize":428291,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVupICRA9TVsSAnZWagAAZ7cQAJH/3MuSv5tZIKYpUUo4\nw+f3DU2Bx94wsd/A6kD0QSMTjanN4O0RLkCOoG64DHYVpOzqJWkQqRh2fCrw\nOGp6TDN6Wm3G2730Ii8FOuOdTsYfnJzrbNrj0diPKmzEA6tcLrdxuMhdKlUl\naH4CntUowH8x6VbBg38wCBIuTz/P1mt2hka5VQAcov3EJRBTHLnXydziw3Lc\n/A+XEOPmFXcMlzkQBNgnr8LPJ3EKRD+hJIId9Z7SpBwVcFAncDUl1cOkSmIS\n87TbU1ELNe03h3IvvMdt0bwk0/ZrpHhHt/0gAk1A26NEZLf30xacc+fH1mC4\ncmH2jPoAqQFbezq/E+mU1LWFnyTpotsqB3ykJwg4puCr5kLmTHmeMpgGTAW/\njOWPvSQ95H4flg0Zj5JrkyeqcKrazkaJ+x+c37b5W8652gC4TuZEbTHd6CS4\ngoSczuM1ygCExbYVVCaU3w7rMcHEjEWHSKSc5UeuzB6+KYbGDVWaeV3P9Df+\nEpNVkelmaGCE/rTVg0K7mbFCw6gAT2C1O88vrcMtz+Rz9DG4LagxUaP/TEo7\nFudXbSYpUNo22LLHNyC1pEgZjatMe+p9zT9YkuvQ80YOjhf3E72DotZc7tTo\n+xj6xKnmVF0FjJGv8NWT/uIrPpsWGODye9jqsl0Ucl+ev1A2uhw3V9Qmdp8d\nXZ/o\r\n=Axau\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIxlw+dZCnceKDyDkFJ9rqHjygEDV8V7iIw6DZnQLNfwIhAJ9hPaLSQWJZqyO3vwCn6ghQHOcCtF5tUpkXJtAefdyC"}]},"maintainers":[{"name":"alexseitsinger","email":"alexseitsinger@gmail.com"}],"_npmUser":{"name":"alexseitsinger","email":"alexseitsinger@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-notifications_1.1.0_1582754376075_0.3750005743640157"},"_hasShrinkwrap":false}},"time":{"created":"2020-02-24T19:32:25.232Z","1.0.0":"2020-02-24T19:32:25.410Z","modified":"2022-04-04T12:41:37.012Z","1.1.0":"2020-02-26T21:59:36.189Z"},"maintainers":[{"name":"alexseitsinger","email":"alexseitsinger@gmail.com"}],"description":"Display notifications in the DOM","homepage":"https://github.com/alexseitsinger/react-notifications","keywords":[],"repository":{"type":"git","url":"https://github.com/alexseitsinger/react-notifications.git"},"author":{"name":"Alex Seitsinger","email":"software@alexseitsinger.com"},"bugs":{"url":"https://github.com/alexseitsinger/react-notifications/issues"},"license":"BSD-2-Clause","readme":"# Notifications\n\nRender notification message at the top level of your DOM, from anywhere in your app.\n\n## Installation\n\n```bash\nyarn add @alexseitsinger/react-notifications\n```\n\n## Exports\n\n#### NotificationsProvider\n\nAdd a DOM element at the root of your app (at the bottom). Each notification rendered will be placed within this container.\nfor each provided notification to be rendered within.\n\n###### Props\n\nName               | Description                                                        | Default   | Required?\n---                | ---                                                                | ---       | ---\ndisplayInterval    | The time(ms) to show each notification before removing the oldest. | undefined | yes\nrenderNotification | Invoked to render each notification.                               | undefined | yes\n\n###### Example\n\n```javascript\n// In app root\nimport { NotificationsProvider } from \"@alexseitsinger/react-notifications\"\n\n// Re-use a render method for each notification.\n// Use this to render each notification with the same template.\nconst renderNotification = (element) => (\n  <div>{element}</div>\n)\n\n// Add the provider to the app root. It will add a mount point into the DOM for the notifications to render within.\nconst App = () => (\n  <NotificationsProvider renderNotification={renderNotification} displayInterval={3000}>\n    <Router>\n      <Route path={\"/\"} exact component={HomePage} />\n    </Router>\n  </NotificationsProvider>\n)\n```\n\n#### withNotifications\n\nHOC that provides **notifications props** to a component.\n\n###### Notification Props Provided:\n\nName                      | Description\n---                       | ---\nNotificationMessage       | Component used to render notification messages.\ncreateNotificationMessage | Function to create notification messages. (Useful for button callback, etc.)\nclearCachedNotifications  | Clears the cached notification names. (Setting `isForced` to `true` ignores this cache)\nclearNotifications        | Removes all the currently renderd notifications.\n\n#### NotificationMessage (via withNotifications)\n\nComponent used to create new notification messages. NOTE: `isForced` is automatically set to `false` for this to prevent render loops.\n\n###### Props\n\nName             | Description                               | Deafault  | Required?\n---              | ---                                       | ---       | ---\nnotificationName | The unique name of the notification.      | undefined | yes\nisRepeated       | Show multiple copies of the same message  | false     | no\nchildren         | The content to render as the notification | undefined | yes\n\n###### Example\n\n```javascript\nimport { withNotifications } from \"@alexseitsinger/react-notifications\"\n\nconst HomePage = withNotifications(({ NotificationMessage }) => (\n  <div id=\"homePage\">\n    <div> Some normal content</div>\n    <NotificationMessage notificationName={\"home-page-render-notification\"} isRepeated={false}>\n      This notification gets displayed once.\n    </NotificationMessage>\n  </div>\n))\n```\n\n#### createNotificationMessage (via withNotifications)\n\nFunction used to create a new notification message.\n\n###### Props\n\nName             | Description                                                    | Default   | Required?\n---              | ---                                                            | ---       | ---\nnotificationName | The unique name of the notification.                           | undefined | yes\nisForced         | Should the notification be shown if it already was previously? | false     | no\nisRepeated       | Show multiple copies of the same message                       | false     | no\nonRender         | Invoked to render the notification message                     | undefined | yes\n\n###### Example\n\n```javascript\n// In a page component, etc.\nimport { withNotifications } from \"@alexseitsinger/react-notifications\"\n\nconst HomePage = () => withNotifications(\n  ({ createNotificationMessage, ...restProps }) => {\n    return (\n      <PageContainer>\n        <div>Some normal page content</div>\n        <button onClick={() => {\n          createNotificationMessage({\n            notificationName: \"on-click-success-notification-1\",\n            onRender: () => <div>You did it!</div>,\n            isForced: true,\n            isRepeated: false,\n          })\n        }}>\n          Click to do action\n        </button>\n      </PageContainer>\n    )\n  }\n)\n```\n","readmeFilename":"README.md"}