{"id":26685854,"url":"https://github.com/alexpermyakov/simple-react-notifications","last_synced_at":"2025-03-26T11:01:08.408Z","repository":{"id":42087384,"uuid":"195117747","full_name":"alexpermiakov/simple-react-notifications","owner":"alexpermiakov","description":"Tiny React.js notification library (1kb gzip).","archived":false,"fork":false,"pushed_at":"2023-03-03T10:13:15.000Z","size":3154,"stargazers_count":61,"open_issues_count":15,"forks_count":6,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-26T01:35:40.974Z","etag":null,"topics":[],"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/alexpermiakov.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}},"created_at":"2019-07-03T19:49:03.000Z","updated_at":"2024-08-25T00:18:37.000Z","dependencies_parsed_at":"2024-04-17T10:53:17.366Z","dependency_job_id":"189a83f4-b3a2-4242-8983-8171da909972","html_url":"https://github.com/alexpermiakov/simple-react-notifications","commit_stats":{"total_commits":57,"total_committers":4,"mean_commits":14.25,"dds":0.07017543859649122,"last_synced_commit":"9cc7008d3cd0ce395de54b900ad43ed2ff711e53"},"previous_names":["alexpermyakov/simple-react-notifications"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexpermiakov%2Fsimple-react-notifications","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexpermiakov%2Fsimple-react-notifications/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexpermiakov%2Fsimple-react-notifications/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexpermiakov%2Fsimple-react-notifications/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexpermiakov","download_url":"https://codeload.github.com/alexpermiakov/simple-react-notifications/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245641426,"owners_count":20648641,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2025-03-26T11:01:02.199Z","updated_at":"2025-03-26T11:01:08.348Z","avatar_url":"https://github.com/alexpermiakov.png","language":"TypeScript","readme":"# Simple-React-Notifications\n\nTiny library (only 1kb gzip) that allows you to add notifications to your app.\nWe don't want to blow up our bundle size because of notifications, right?\n\n## Demo\n\nhttps://alexpermyakov.github.io/simple-react-notifications/\n\nDespite the small size, it supports:\n\n- [Rendering success and error default notifications](#rendering-success-and-error-default-notifications)\n- [Rendering user defined component](#rendering-user-defined-component)\n- [Positioning](#positioning)\n- [Configuring all in one place](#configuring-all-in-one-place)\n- [Animation](#animation)\n- [Remove notification items programmatically](#remove-notification-items-programmatically)\n\n## Installation\n\n```\n$ npm install simple-react-notifications\n$ yarn add simple-react-notifications\n```\n\n## Usage\n\n### Rendering success and error default notifications\n\nNotifier has a few built-in components for displaying an error or a successfull operation:\n\n```javascript\nimport React from \"react\";\nimport notifier from \"simple-react-notifications\";\nimport \"simple-react-notifications/dist/index.css\";\n\nconst App = () =\u003e (\n  \u003cdiv\u003e\n    \u003cbutton\n      onClick={() =\u003e {\n        notifier.success(\"Your items have been updated\");\n        // notifier.error(\"Something went wrong, try again.\");\n      }}\n    \u003e\n      Lets render a default component\n    \u003c/button\u003e\n  \u003c/div\u003e\n);\n```\n\n### Rendering user defined component\n\nThe real power comes with rendering our own component. In this case it's not even a notification, just a view with real data:\n\n```javascript\nconst RouteInfo = ({ header, onClosePanel }) =\u003e (\n  \u003cdiv\n    className=\"route-info\"\n    onClick={onClosePanel}\n    style={{\n      height: \"200px\",\n      background: \"#54cea7\",\n      color: \"white\",\n      padding: \"8px 16px\",\n      position: \"relative\",\n      boxShadow: \"rgba(0, 0, 0, 1) 0px 0px 14px 2px\"\n    }}\n  \u003e\n    \u003ch3 className=\"subtitle\"\u003e{header}\u003c/h3\u003e\n    \u003cp\u003eBicycle 2.4 km, 8 min.\u003c/p\u003e\n    \u003cp\u003eUse caution - may involve errors or sections not suited for bicycling\u003c/p\u003e\n    \u003cbutton\n      className=\"button\"\n      style={{ position: \"absolute\", bottom: \"16px\", right: \"16px\" }}\n    \u003e\n      Use this route\n    \u003c/button\u003e\n  \u003c/div\u003e\n);\n```\n\nIt completely up to us the way we add styles. We can use styled-components or whatever we like. The notify() method will just render it:\n\n```javascript\nconst App = () =\u003e (\n  \u003cdiv\u003e\n    \u003cbutton\n      onClick={() =\u003e\n        notifier({\n          render: ({ id, onClose }) =\u003e (\n            \u003cRouteInfo\n              key={id}\n              onClosePanel={onClose}\n              header={\"The shortest way to ride home.\"}\n            /\u003e\n          )\n        })\n      }\n    \u003e\n      Notify with just a text message!\n    \u003c/button\u003e\n  \u003c/div\u003e\n);\n```\n\nAs you can see here, render() receives onClose callback, which we have to pass inside our component in order to close the notification when user click on the button.\n\n### Positioning\n\nBy default, all items will be positioned in the top right corner. The following values are allowed: top-right, top-center, top-left, bottom-right, bottom-center, bottom-left.\n\n```javascript\nconst App = () =\u003e (\n  \u003cdiv\u003e\n    \u003cbutton\n      onClick={() =\u003e {\n        // notifier({\n        //   position: \"top-left\"\n        // });\n\n        notifier({\n          single: true, // display only the latest item\n          position: \"top-center\",\n          render: ({ id, onClose }) =\u003e (\n            \u003cRouteInfo\n              key={id}\n              onClosePanel={onClose}\n              header={\"The shortest way to ride home.\"}\n            /\u003e\n          )\n        });\n      }}\n    \u003e\n      Show two of them in different places\n    \u003c/button\u003e\n  \u003c/div\u003e\n);\n```\n\n### Configuring all in one place\n\nInstead of specifing all params again and again for each item, we can put it in one place:\n\n```javascript\nnotifier.configure({\n  autoClose: 2000,\n  position: \"top-center\",\n  delay: 500,\n  single: false,\n  width: \"480px\"\n});\n\nconst App = () =\u003e (\n  \u003cdiv\u003e\n    \u003cbutton\n      onClick={() =\u003e {\n        notifier.success(\"Your items have been updated\");\n      }}\n    \u003e\n      Display an item with 500 ms delay. Now it is done in configure()\n    \u003c/button\u003e\n  \u003c/div\u003e\n);\n```\n\nParams in notifier function will override their default values in configure().\n\n### Animation\n\nFirst, define the css-animation somewhere in your .css file:\n\n```css\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes fadeOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n```\n\nSecond, specify it during the notifier() call or in configure():\n\n```javascript\nnotifier.configure({\n  position: \"top-center\",\n  animation: {\n    in: \"fadeIn\", // try to comment it out\n    out: \"fadeOut\",\n    duration: 600 // overriding the default(300ms) value\n  }\n});\n\nconst App = () =\u003e (\n  \u003cdiv\u003e\n    \u003cbutton\n      onClick={() =\u003e {\n        notifier.success(\"Your items have been updated\");\n      }}\n    \u003e\n      Show two of them in different places\n    \u003c/button\u003e\n  \u003c/div\u003e\n);\n```\n\nYou can specify only in or out params as well.\n\n### Remove notification items programmatically\n\n```javascript\nimport React from \"react\";\nimport notifier from \"simple-react-notifications\";\n\nnotifier.configure({\n  render: ({ id, onClose }) =\u003e (\n    \u003cRouteInfo\n      key={id}\n      onClosePanel={onClose}\n      header={\"The shortest way to ride home.\"}\n    /\u003e\n  )\n});\n\nclass App extends React.Component {\n  id = null;\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cbutton onClick={() =\u003e (this.id = notifier())}\u003eNotify\u003c/button\u003e\n        \u003cbutton onClick={() =\u003e notifier.dismiss(this.id)}\u003eDismiss\u003c/button\u003e\n        \u003cbutton onClick={() =\u003e notifier.dismiss()}\u003eDismiss all\u003c/button\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n","funding_links":[],"categories":["UI Components"],"sub_categories":["Notification"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexpermyakov%2Fsimple-react-notifications","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexpermyakov%2Fsimple-react-notifications","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexpermyakov%2Fsimple-react-notifications/lists"}