{"id":16485649,"url":"https://github.com/damikun/react-toast","last_synced_at":"2026-03-02T06:31:03.504Z","repository":{"id":37700114,"uuid":"318321136","full_name":"damikun/React-Toast","owner":"damikun","description":"Custom push notification (Toast) implementation under React + stayed by TailwindCSS. ","archived":false,"fork":false,"pushed_at":"2021-03-07T19:00:40.000Z","size":2617,"stargazers_count":79,"open_issues_count":0,"forks_count":16,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-02-27T12:14:52.773Z","etag":null,"topics":["context-api-react","notifications","react","react-notification","react-push-notification","react-toast","react-toast-notifications","tailwind-toast","toast"],"latest_commit_sha":null,"homepage":"https://damikun.github.io/React-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/damikun.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}},"created_at":"2020-12-03T21:13:08.000Z","updated_at":"2024-09-17T18:16:26.000Z","dependencies_parsed_at":"2022-09-11T16:32:12.433Z","dependency_job_id":null,"html_url":"https://github.com/damikun/React-Toast","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damikun%2FReact-Toast","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damikun%2FReact-Toast/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damikun%2FReact-Toast/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damikun%2FReact-Toast/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/damikun","download_url":"https://codeload.github.com/damikun/React-Toast/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243826783,"owners_count":20354220,"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":["context-api-react","notifications","react","react-notification","react-push-notification","react-toast","react-toast-notifications","tailwind-toast","toast"],"created_at":"2024-10-11T13:26:34.125Z","updated_at":"2026-03-02T06:31:03.443Z","avatar_url":"https://github.com/damikun.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cbr /\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/damikun/React-Toast\"\u003e\n  \u003cimg src=\"images/toast.gif\" alt=\"React-Toast-Notify\" \u003e\n  \u003c/a\u003e\n\n  \u003ch3 align=\"center\"\u003eReact Toast Component\u003c/h3\u003e\n   \u003ch3 align=\"center\"\u003e\n    \u003ca href=\"https://damikun.github.io/React-Toast/\"\u003eOnline Demo\u003c/a\u003e\n  \u003c/h3\u003e\n\u003c/p\u003e\n\n### Description\n\nThis is custom toast component implemented by react hooks + React Context API and stayled using tailwindCSS framework. Feel free to inspirate by implementation :) This is trim of my UI lib that i use for my projects.\n\nThis componnent allow to push notifications to user screen and auto remove it after set or default time..\n\nExample implements this push-Events:\n\n- Info\n- Error\n- Warning\n- Success\n- Custom body\n\n#### Concepts\n\n- Responsive\n- Using Hooks and Context API\n- Using Tailwind and Fontawesome\n  (All can be adjusted by endpoint user)\n\n### Installation\n\n(!!! Package is not available on npm !!!)\n\n1. Clone the repo\n   ```sh\n   git clone https://github.com/damikun/React-Toast.git\n   ```\n2. Restore packages\n   ```\n   yarn install\n   ```\n3. Build and run demo\n   ```\n   yarn run start\n   ```\n\n\u003c!-- USAGE EXAMPLES --\u003e\n\n### Configuration API\n\nToast Provider\n\n- Usually placed in Providers.tsx or on top of App.tsx\n- Give you access to toast\n- In this example toast are send from \"HomePage\"\n\n```tsx\n\u003cToastProvider variant={\"top-right\"}\u003e\n  \u003cLayout\u003e\n    \u003cHomePage /\u003e\n  \u003c/Layout\u003e\n\u003c/ToastProvider\u003e\n```\n\nUse hook to access toast actions\n\n```tsx\n// Custom hook to access default context\nconst toast = useToast();\n// OR\n// Use of concrete conetxt\nconst toast = useContext(ToastContext);\n```\n\nExample:\n\n```tsx\nexport default function HomePage() {\n  const toast = useToast();\n\n  return (\n    \u003cdiv\u003e\n      \u003cStayledButton\n        variant=\"primaryred\"\n        onClick={() =\u003e toast?.pushError(\"Oppps Error\", 5000)}\n      \u003e\n        Error\n      \u003c/StayledButton\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\nVarious types to push\n\n```tsx\ntoast?.pushError(\"Error messgae\", 5000);\ntoast?.pushWarning(\"Warning message\"); // Default timeValue\ntoast?.pushSuccess(\"Success message\");\ntoast?.pushInfo(\"Info Message\");\ntoast?.push(\"Message\", \"Info\", 2000);\ntoast?.pushCustom(\u003cToastCustomMessage /\u003e, 2000);\ntoast?.pushError(\"Error messgae\", 5000, \"truncate-2-lines\");\n```\n\nPredefined types (can be extended)\n\n```tsx\ntype TostMessageType = \"Info\" | \"Success\" | \"Warning\" | \"Error\";\n```\n\nSupport message truncate trim\n\n```tsx\ntype Truncate = \"truncate-1-lines\" | \"truncate-2-lines\" | \"truncate-3-lines\";\n```\n\nPass any custom React.ReactNode component to body\n\n```tsx\ntoast?.pushCustom(\u003cToastCustomMessage /\u003e, 2000);\ntoast?.pushCustom(\u003cdiv\u003eMy custom body\u003c/div\u003e, 2000);\n```\n\nVarious toast position\n\n```tsx\n\n\u003cToastProvider variant={\"top-right\"}\u003e\n // ...\n\u003c/ToastProvider\u003e\n\ntype Position \"top_right\" | \"top_middle\" | \"top_left\" | \"bottom_right\" | \"bottom_middle\" | \"bottom_left\"\n```\n\n### Other\n\nFor valid display check that your React _\"root\"_ is flexible and fulscreen to support all browsers behaviour...\n\n```\n// public/index.html\n\u003cdiv class=\"flex h-full w-full\" id=\"root\"\u003e\u003c/div\u003e\n```\n\n### Doc\n\nYou can read [setp-by-step](./Step-By-Step.md) tutorial if you wanna start from scratch. (Currently writting / Not finished).\n\n## License\n\nThis project is licensed with the [MIT license](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdamikun%2Freact-toast","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdamikun%2Freact-toast","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdamikun%2Freact-toast/lists"}