{"id":14957496,"url":"https://github.com/eimaam/react-next-toast","last_synced_at":"2026-03-27T04:04:53.209Z","repository":{"id":178773591,"uuid":"662353275","full_name":"eimaam/react-next-toast","owner":"eimaam","description":"An easy to use notification system package for your React/Next.js Web Apps","archived":false,"fork":false,"pushed_at":"2024-07-07T13:39:04.000Z","size":140,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"v2","last_synced_at":"2025-01-16T02:22:09.143Z","etag":null,"topics":["next-js","next-toast","npm","npm-package","open-source","react-notifications","react-toast","toast","toastify","tostify"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-next-toast","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/eimaam.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2023-07-05T00:36:27.000Z","updated_at":"2024-07-07T13:39:06.000Z","dependencies_parsed_at":null,"dependency_job_id":"c2bb81a8-c831-4495-9416-4357803524ce","html_url":"https://github.com/eimaam/react-next-toast","commit_stats":null,"previous_names":["eimaam/react-next-toast"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eimaam%2Freact-next-toast","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eimaam%2Freact-next-toast/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eimaam%2Freact-next-toast/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eimaam%2Freact-next-toast/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eimaam","download_url":"https://codeload.github.com/eimaam/react-next-toast/tar.gz/refs/heads/v2","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234883314,"owners_count":18901366,"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":["next-js","next-toast","npm","npm-package","open-source","react-notifications","react-toast","toast","toastify","tostify"],"created_at":"2024-09-24T13:14:59.130Z","updated_at":"2025-10-01T17:30:48.966Z","avatar_url":"https://github.com/eimaam.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-next-toast\n### 📦 Introducing react-next-toast 🍞\nTired of dealing with complex notification packages or having to spend time building components just to render alerts or toast notificaitons in your React projects? Look no further! Here, I introduce `react-next-toast` \n\n### 🚀 Why Choose react-next-toast??\n- Easy to use: `react-next-toast` was built with ease in mind - say goodbye to complex toast declarations - with react-next-toast you have a toast via a single function call.\n- Customizable: With our Four (4) different types of Toast Notifications - \u003cb\u003eSuccess, Error, Warning and Info\u003cb\u003e, you get a fine-tuned and different UI display for each which directly passes message from the choice of colour and design. It also provides option to choose duration of toasts, colours and fonts.\n- Lightweight: Designed with performance in mind as well, the package is designed to lightweight in other to ensure it does not slow down your app's performance.\n- Fully-typed: `react-next-toast` comes with TypeScript support out of the box to provide type safety and seamless renderings.\n\n### 📝 How to Use:\n1. Install the package into your project\n   \n~~~\nnpm install react-next-toast\n~~~\n\n2. Import the `showToast` \u0026 use in your Component:\n\n```javascript\nimport { showToast } from 'react-next-toast';\n\nconst MyComponent = () =\u003e {\n\nconst handleClick = () =\u003e {\n    showToast.success('Log in successful')\n}\n\nreturn (\n    \u003cdiv\u003e\n      \u003ch1\u003eHello Dev\u003c/h1\u003e\n      \u003cbutton onClick={handleClick}\u003eLog in\u003c/button\u003e\n    \u003c/div\u003e\n);\n}\nexport default MyComponent;\n\n````\n### Demo\n\n\n![react-next-toast-demo-gif](https://github.com/eimaam/react-next-toast/assets/43689084/6ef36df6-6683-4128-b5f9-0924d77e0193)\n\n##### CodeSandbox \n[Code Sandbox Environment](https://codesandbox.io/p/sandbox/react-next-toast-demo-mtltvw?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cltvljqkh00063b6i2uff92xu%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cltvljqkg00023b6i4g3mvfp1%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cltvljqkg00033b6i26e2hm7e%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cltvljqkg00053b6it67qtnlw%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cltvljqkg00023b6i4g3mvfp1%2522%253A%257B%2522id%2522%253A%2522cltvljqkg00023b6i4g3mvfp1%2522%252C%2522tabs%2522%253A%255B%255D%257D%252C%2522cltvljqkg00053b6it67qtnlw%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cltvljqkg00043b6il3o8r8ub%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522cltvljqkg00053b6it67qtnlw%2522%252C%2522activeTabId%2522%253A%2522cltvljqkg00043b6il3o8r8ub%2522%257D%252C%2522cltvljqkg00033b6i26e2hm7e%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522cltvljqkg00033b6i26e2hm7e%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D)\n\n### 💡 Additional Features\nYou can customize the `duration` of the Toast Notification by passing time in `ms` as second parameter to the `showToast` function.\nThe default is `5000` which is 5 seconds.\n\n````javascript\nconst handleClick = () =\u003e {\n  showToast.error('incorrect login details', 4000)\n}\n````\n\n### Contribution\nProject is OPEN SOURCE! Feel free to fork the repo and send a PR to contribute. I will be sure to merge if its a good piece. Thank you\n\n#### **NOTE:** _For more advanced customization, you can directly use the ToastNotification component and pass in the required props - duration, position, className._\n\n_Thank you for using `react-next-toast_! 🙏❤️ If you experience any issue, have any questions or sugestions for improvement, feel free to raise an issue here on GitHub or reach out to me. Your feedback is very vital! ☺:)\n\n_Cheers to toasting to simpler and delightful notes! 🥂_\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feimaam%2Freact-next-toast","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feimaam%2Freact-next-toast","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feimaam%2Freact-next-toast/lists"}