{"id":19055307,"url":"https://github.com/dilane3/react-simple-toastify","last_synced_at":"2026-06-22T22:31:02.629Z","repository":{"id":57155231,"uuid":"412512095","full_name":"dilane3/react-simple-toastify","owner":"dilane3","description":"A React js library for pushing notifications in your app","archived":false,"fork":false,"pushed_at":"2021-10-26T13:12:49.000Z","size":614,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-11-11T22:26:29.778Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dilane3.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-10-01T15:03:49.000Z","updated_at":"2021-10-26T12:53:42.000Z","dependencies_parsed_at":"2022-08-26T08:31:05.392Z","dependency_job_id":null,"html_url":"https://github.com/dilane3/react-simple-toastify","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/dilane3/react-simple-toastify","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dilane3%2Freact-simple-toastify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dilane3%2Freact-simple-toastify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dilane3%2Freact-simple-toastify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dilane3%2Freact-simple-toastify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dilane3","download_url":"https://codeload.github.com/dilane3/react-simple-toastify/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dilane3%2Freact-simple-toastify/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34668500,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-22T02:00:06.391Z","response_time":106,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":"2024-11-08T23:43:57.301Z","updated_at":"2026-06-22T22:31:02.603Z","avatar_url":"https://github.com/dilane3.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Getting stated with react-simple-toastify\n\n**react-simple-toastify** is a simple library for displaying notifications in your application\n\n## Installation\nFor installing this library you should use **npm**.\n\n```bash\nnpm install react-simple-toastify\n\n```\n\nor\n\n```bash\nnpm i react-simple-toastify\n\n```\n\n## Usage\nIt's very simple to setup this library, you have to follow the following steps below.\n\n### Step 1.\nYou have to import and set up one Provider of context in your application, where you want to display **toasts**.\nAssuming that you have an App component which is your main component that contains all the rest of yours other components. You must put all other elements or components inside a Provider component named 'ToastProdvider', which contains global declaration of data that will be access anywhere in the app.\n\n**Import**\n```javascript\nimport {ToastProvider} from 'react-simple-toastify'\n\n```\n\n**Creation of App component and setup the Provider**\n\n```javascript\n\nconst App = () =\u003e {\n  return (\n    \u003cToastProvider\u003e\n      {\n        // here you can put anything you want...\n      }\n    \u003cToastProvider\u003e\n  )\n}\n\nexport default App\n\n```\n\n### Step 2.\nNow, you need to add some options to the **ToastProvider**\n\n**Set up**\nLet's consider the following options\n\n```javascript\n\nconst toastOptions = {\n  position: \"top\" || \"center\" || \"bottom\",\n  timeout: 1000\n}\n\n```\n\n**Explanation of the Option**\n| properties | type     | default   | description                                  |\n| ---        | ---      | ---       | ---                                          |\n| position   | String   | \"bottom\"  | set the position of the toast on the screen  |\n| timeout    | Number   | 1000      | set the delay time before masking the toast  |\n\n**Insertion of options to the ToastProvider Component**\n\n```javascript\n\nconst App = () =\u003e {\n  // some options\n  const toastOptions = {\n    position: \"bottom\",\n    timeout: 1000\n  }\n\n  return (\n    \u003cToastProvider options={toastOptions}\u003e\n      {\n        // here you can put anything you want...\n      }\n    \u003cToastProvider\u003e\n  )\n}\n\nexport default App\n\n```\n\nIt's ok, you have correctly setup the toast system in your application, Congrats ... Now, you can display toast everywhere in your application\n\n### Step 3.\n\nNow, you are ready to display toast. Suppose that you have another component named **TestComponent**. Let's see how we can easily display toast.\n\n#### With Function component\n\n```javascript\nimport React, {useContext} from 'react'\nimport {ToastContext} from 'react-simple-toastify'\n\nconst TestComponent = () =\u003e {\n  /**\n   * Here we destructure the displayToast from ToastContext\n   **/\n  const {displayToast} = useContext(ToastContext)\n\n  return (\n    \u003cdiv\u003e\n      {\n        // other elements here\n      }\n\n      \u003cbutton onClick={() =\u003e displayToast(\"Hello World !\")}\u003edisplay Toast\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n\nexport default TestComponent\n\n```\n\n#### With Class Component\n\n```javascript\nimport React from 'react'\nimport {ToastContext} from 'react-simple-toastify'\n\nclass TestComponent extends React.Component {\n  render() {\n    const {displayToast} = this.context\n\n    return (\n      \u003cdiv\u003e\n        {\n          // other elements here\n        }\n\n        \u003cbutton onClick={() =\u003e displayToast(\"Hello World !\")}\u003edisplay Toast\u003c/button\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n\nTestComponent.contextType = ToastContext\n\nexport default TestComponent\n\n```\n\n**Explanation**\n\nWhen you call the displayToast() function, by passing the message as argument, the toast will be displayed and will disappear after the number of milliseconds define in the configuration of the **ToastProvider**.\nThis function takes only one argument, which is the message to display.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdilane3%2Freact-simple-toastify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdilane3%2Freact-simple-toastify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdilane3%2Freact-simple-toastify/lists"}