{"_id":"@ambiere/react-notification","_rev":"1-6d0c7687395570bc99afe5c4f8c040d9","name":"@ambiere/react-notification","description":"Utility to simplify react notifications","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.1":{"name":"@ambiere/react-notification","version":"0.0.1","keywords":["react","notification"],"author":{"name":"ambiere"},"license":"MIT","_id":"@ambiere/react-notification@0.0.1","maintainers":[{"name":"ambiere","email":"itsambiere@gmail.com"}],"homepage":"https://github.com/ambiere/react-notification#readme","bugs":{"url":"https://github.com/ambiere/react-notification/issues"},"dist":{"shasum":"485ce637838550c763a8df91e92a911e22227da4","tarball":"https://registry.npmjs.org/@ambiere/react-notification/-/react-notification-0.0.1.tgz","fileCount":4,"integrity":"sha512-jhN4W/d5jNFYvrTNfc0AWOgyTm5ccMjJYit7nh5tUoYJzZTMUzqdXuEtG8cULQ/EaR9PGflr6WS12lpfUzpEdA==","signatures":[{"sig":"MEUCIG/rP/rkVgd8yt0lXCigZT6aWQ3/aRi6x4A9fVGd4iazAiEA41m815OXLEMslzNkqMC6zDNGOm26urkt2u1zslOVwo4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4338},"main":"./src/index.js","type":"module","exports":{"default":"./src/index.js"},"gitHead":"05f1d3005664ee7b48e45970bbede5065d2c76a6","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"ambiere","email":"itsambiere@gmail.com"},"repository":{"url":"git+https://github.com/ambiere/react-notification.git","type":"git"},"_npmVersion":"10.2.4","description":"Utility to simplify react notifications","directories":{},"_nodeVersion":"21.6.1","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/react-notification_0.0.1_1717879751408_0.6984770963988611","host":"s3://npm-registry-packages"}},"0.0.2":{"name":"@ambiere/react-notification","version":"0.0.2","repository":{"type":"git","url":"git+https://github.com/ambiere/react-notification.git"},"homepage":"https://github.com/ambiere/react-notification#readme","bugs":{"url":"https://github.com/ambiere/react-notification/issues"},"type":"module","description":"Utility to simplify react notifications","main":"./src/index.js","types":"./src/index.d.ts","exports":{"default":"./src/index.js"},"scripts":{"test":"standard --fix && vitest"},"keywords":["react","notification"],"author":{"name":"ambiere"},"license":"MIT","devDependencies":{"standard":"^17.1.0","vitest":"^1.6.0"},"_id":"@ambiere/react-notification@0.0.2","gitHead":"8b6c8b6a23e83b0c9cb68859fcd8685f1b2d7064","_nodeVersion":"21.6.1","_npmVersion":"10.2.4","dist":{"integrity":"sha512-vNc+5/yzXv3SwOznlZwsQiRWuBVWidvtkLVpiuTMMltVb+zAdLCZU5zlJQ52O+ZRhGf2Q+kNkNYuBcC7w6tzmQ==","shasum":"a6fc06b8b23d3a9459c8c536aac07b56f79cee2e","tarball":"https://registry.npmjs.org/@ambiere/react-notification/-/react-notification-0.0.2.tgz","fileCount":5,"unpackedSize":7461,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEfyrMTJwsBFJIuLgaouESw4ITDO2EfxHwGSSI38UhK/AiEA1/evosYpCO5ZOqGg8DEliy7XWeETlivkzYwWhzkVmJ4="}]},"_npmUser":{"name":"ambiere","email":"itsambiere@gmail.com"},"directories":{},"maintainers":[{"name":"ambiere","email":"itsambiere@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-notification_0.0.2_1717970623028_0.38088211325525023"},"_hasShrinkwrap":false}},"time":{"created":"2024-06-08T20:49:11.314Z","modified":"2024-06-09T22:03:43.335Z","0.0.1":"2024-06-08T20:49:11.565Z","0.0.2":"2024-06-09T22:03:43.165Z"},"maintainers":[{"name":"ambiere","email":"itsambiere@gmail.com"}],"author":{"name":"ambiere"},"repository":{"type":"git","url":"git+https://github.com/ambiere/react-notification.git"},"keywords":["react","notification"],"license":"MIT","homepage":"https://github.com/ambiere/react-notification#readme","bugs":{"url":"https://github.com/ambiere/react-notification/issues"},"readme":"# react-notification [![CI](https://github.com/ambiere/react-notification/actions/workflows/main.yml/badge.svg)](https://github.com/ambiere/react-notification/actions/workflows/main.yml)\n\n>Simple utility to simplify react notifications. <br>Applies animation properties to your notification components\n\n## Install\n\n```bash\nnpm install @ambiere/react-notification\n```\n\n## Usage\n\n```jsx\nimport ReactNotification from \"react-notification\"\n\nuseEffect(()=>{\n  //.....\n  const notification = new ReactNotification({\n    message: \"Notification message\",\n    timeout: 2500,\n    root: \"root\",\n    animation: \"animation\",\n    formatter(message) {\n      return message.concat(\" :)\")\n    }\n  })\n\n  notification.notify(()=>navigate(\"/home\"))\n  //....\n})\n\n\nreturn (\n  //....\n  <div className=\"notification\">\n    //....\n    <p className=\"root\"></p>\n  </div>\n)\n\n```\n> NB: The notification node wrapper should have a className of `notification`, react-notification internally query the node wrapper using `notification` class selector.\n\n## Options\n\n### formatter\n\ntype: `function`\n\nCustom function to format notification message\n\n- Param: `message` - Raw unformatted text, internally supplied as the first argument of the formatter function.\n- Returns: `message` - Formatted text.\n\n\n### timeout\n\ntype: `number`<br>\ndefault: `2500`\n\nTime in milliseconds a notification will be displyed before disappearing.\n\n\n### message\n\ntype: `string`\n\nRaw unformatted notification message.\n\n\n### root\n\ntype: `string`<br>\ndefault: `notification`\n\nNode class selector, where notification content will be populated.\n\n\n### animation\n\ntype: `string`\n\nCSS class selector containing animation properties to be applied on notification node wrapper.\n\n\n## API\n\n### notify(cb?)\n\ntype: `function`\n\nFunction that applies animation properties to the notification node wrapper. Accept a callback function that will be executed after animation is completed\n\n- Param: `cb` - Optional callback function\n\n\n### populateRoot()\n\ntype: `function`\n\nFunction that populate notification message in notification node specified by node class selector, `root`.\n\n- Returns: `depopulate()` - Function that depopulate notification message from notification node specified by node class selector, `root`.\n\n## License\n\n[MIT License](https://github.com/ambiere/react-notification/blob/main/license)\n\n","readmeFilename":"readme.md"}