{"id":13421878,"url":"https://github.com/OlegWock/react-local-toast","last_synced_at":"2025-03-15T10:31:28.411Z","repository":{"id":41485709,"uuid":"509105262","full_name":"OlegWock/react-local-toast","owner":"OlegWock","description":"Local toast helps you to provide feedback related to particular components on page","archived":false,"fork":false,"pushed_at":"2024-05-02T20:01:25.000Z","size":1375,"stargazers_count":132,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-12T02:24:49.087Z","etag":null,"topics":["react","toast"],"latest_commit_sha":null,"homepage":"https://react-local-toast.netlify.app/","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/OlegWock.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,"publiccode":null,"codemeta":null}},"created_at":"2022-06-30T14:06:02.000Z","updated_at":"2024-12-06T16:52:13.000Z","dependencies_parsed_at":"2024-04-17T10:53:24.728Z","dependency_job_id":"c2550c9b-a1ee-44c6-80d8-6ec8fdfd8099","html_url":"https://github.com/OlegWock/react-local-toast","commit_stats":{"total_commits":43,"total_committers":1,"mean_commits":43.0,"dds":0.0,"last_synced_commit":"b4e6fdf0e0570fc2abbd34c0255410892af6b213"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OlegWock%2Freact-local-toast","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OlegWock%2Freact-local-toast/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OlegWock%2Freact-local-toast/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OlegWock%2Freact-local-toast/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/OlegWock","download_url":"https://codeload.github.com/OlegWock/react-local-toast/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243719045,"owners_count":20336591,"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":["react","toast"],"created_at":"2024-07-30T23:00:33.328Z","updated_at":"2025-03-15T10:31:27.804Z","avatar_url":"https://github.com/OlegWock.png","language":"TypeScript","funding_links":[],"categories":["UI Components","TypeScript"],"sub_categories":["Notification"],"readme":"# react-local-toast\n\n[![npm version][npmv-image]][npmv-url]\n[![npm downloads][npmd-image]][npmd-url]\n\n\u003e Local toast helps you to provide feedback related to particular components on page\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./demo.gif\" alt=\"Demo\"\u003e\n\u003c/p\u003e\n\n\n\u003e [!IMPORTANT]  \n\u003e This is v2 of react-local-toast. There weren't any changes in API, but v2 doesn't provide minified styles.\n\n\n## Features\n\n* Local toasts are linked to particular component in DOM.\n* Toast can be displayed on right/left/top/bottom side of component.\n* Toast can be hidden after some timout or hidden programatically.\n* Component might have multiple toasts.\n* Multiple toasts stucks **vertically** (even if displayed on left or right side).\n* `info`, `success`, `warning`, `error` and `loading` toasts out of the box.\n* You can bring your own design. Or your own Toast component. Or your custom implementation of toasts.\n* WAI-ARIA support. \n* TypeScript!\n\n\n## Documentation and showcase\n\nCan be found [here](https://react-local-toast.netlify.app/). Check it out, I spent a lot of effort making it 😅.\n\n## Installation\n\n```\nnpm install react-local-toast --save\n\n# Or if you prefer yarn\nyarn add react-local-toast\n```\n\n## Basic Usage\n\nreact-local-toast doesn't automatically inject its styles into DOM, you need to do that. In most cases it will be just:\n\n```js\nimport 'react-local-toast/dist/bundle.css';\n```\n\nThis should work fine for most of tools (Create React App included). For more specific use cases (e.g. using toasts in Shadow DOM) you might want to inject styles manually.\n\nNow you need to wrap your application in `LocalToastProvider`. \n\n```jsx\nimport React from 'react';\nimport { LocalToastProvider } from 'react-local-toast';\n\nexport default () =\u003e {\n    return (\u003cLocalToastProvider\u003e\n        {/* All your components that will use local toasts should be children of this provider. */}\n        \u003cApp /\u003e\n    \u003c/LocalToastProvider\u003e);\n};\n```\n\nLocal toasts are linked to particular components on page, so let's mark our component as target for local toast:\n\n```jsx\nimport React from 'react';\nimport { LocalToastTarget } from 'react-local-toast';\n\nexport const App = () =\u003e {\n    return (\u003cdiv\u003e\n        \u003cp\u003eThis component should be inside LocalToastProvider\u003c/p\u003e\n        {/* Wrap your component with \u003cLocalToastTarget\u003e */}\n        \u003cLocalToastTarget name=\"btn\"\u003e\n            \u003cbutton\u003eClick me please!\u003c/button\u003e\n        \u003c/LocalToastTarget\u003e\n    \u003c/div\u003e);\n};\n```\n\nLocal toast uses refs to get position of component, so in case you want to use toasts with functional components – make sure they are wrapped in `React.forwardRef`.\n\nAnd final piece! Update your component to actually produce local toasts:\n\n```jsx\nimport React from 'react';\n// New import here !!\nimport { LocalToastTarget, useLocalToast } from 'react-local-toast';\n\nexport const App = () =\u003e {\n    // Use hook to show and hide toasts\n    const {showToast, removeToast} = useLocalToast();\n\n    return (\u003cdiv\u003e\n        \u003cp\u003eThis component should be inside LocalToastProvider\u003c/p\u003e\n        \u003cLocalToastTarget name=\"btn\"\u003e\n            \u003cbutton onClick={() =\u003e showToast('btn', 'Hello my first toast!')}\u003eClick me please!\u003c/button\u003e\n        \u003c/LocalToastTarget\u003e\n    \u003c/div\u003e);\n};\n```\n\nIn case you need to show toast from class component, you can use HOC like this:\n\n```tsx\nimport { LocalToastTarget, withLocalToast, LocalToastHocProps } from 'react-local-toast';\n\ninterface Props extends LocalToastHocProps {\n    name: string\n}\n\nclass ClassComp extends React.Component\u003cProps, any\u003e {\n    sayHello = () =\u003e {\n        this.props.showToast('class_comp', `Hello, ${this.props.name}!`)\n    };\n    render() {\n        return (\u003cdiv\u003e\n            \u003cLocalToastTarget name='class_comp'\u003e\n                \u003cbutton onClick={sayHello}\u003eSay hello\u003c/button\u003e\n            \u003c/LocalToastTarget\u003e\n        \u003c/div\u003e);\n    }\n}\n\n// And later use thic component as you usually do\nexport default withLocalToast(ClassComp);\n```\n\nThis will pass toast-related functions (exactly same as in `useLocalToast` hook) as props to wrapped component.\n\nCool, huh?\n\n## License\n\nMIT\n\n[npmv-image]: https://img.shields.io/npm/v/react-local-toast.svg?style=flat-square\n[npmv-url]: https://www.npmjs.com/package/react-local-toast\n[npmd-image]: https://img.shields.io/npm/dm/react-local-toast.svg?style=flat-square\n[npmd-url]: https://www.npmjs.com/package/react-local-toast\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FOlegWock%2Freact-local-toast","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FOlegWock%2Freact-local-toast","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FOlegWock%2Freact-local-toast/lists"}