{"id":17717171,"url":"https://github.com/edinelsonslima/toast-notification","last_synced_at":"2026-02-16T12:31:38.983Z","repository":{"id":211179518,"uuid":"728387462","full_name":"edinelsonslima/toast-notification","owner":"edinelsonslima","description":"Biblioteca de toast notifications","archived":false,"fork":false,"pushed_at":"2025-04-06T15:32:47.000Z","size":227,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-11-23T04:08:12.174Z","etag":null,"topics":["library","react","toast-notifications","typescript","vite"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@edinelsonslima/toast-notification","language":"TypeScript","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/edinelsonslima.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-12-06T20:46:29.000Z","updated_at":"2025-04-06T15:32:50.000Z","dependencies_parsed_at":"2024-03-29T23:21:46.758Z","dependency_job_id":"117c1d44-e5f5-4ec7-9360-c260f9ec1346","html_url":"https://github.com/edinelsonslima/toast-notification","commit_stats":null,"previous_names":["edinelsonslima/toast-notification"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/edinelsonslima/toast-notification","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edinelsonslima%2Ftoast-notification","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edinelsonslima%2Ftoast-notification/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edinelsonslima%2Ftoast-notification/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edinelsonslima%2Ftoast-notification/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/edinelsonslima","download_url":"https://codeload.github.com/edinelsonslima/toast-notification/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edinelsonslima%2Ftoast-notification/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29507902,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-16T09:05:14.864Z","status":"ssl_error","status_checked_at":"2026-02-16T08:55:59.364Z","response_time":115,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["library","react","toast-notifications","typescript","vite"],"created_at":"2024-10-25T14:13:04.010Z","updated_at":"2026-02-16T12:31:38.966Z","avatar_url":"https://github.com/edinelsonslima.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eToast Notifications\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimage src=\"https://github.com/edinelsonslima/lp-toast-notification/blob/main/lp.gif\"/\u003e\n\u003c/div\u003e\n\n## 👀 Links\n- 🔗 [Apresentação do toast notification](https://edinelsonslima.github.io/lp-toast-notification/)\n- 🔗 [NPM](https://www.npmjs.com/package/@edinelsonslima/toast-notification)\n\n## ⤵️ Instalando\nAdicionar com **yarn**\n```\nyarn add @edinelsonslima/toast-notification\n```\nAdicionar com **npm**\n```\nnpm install @edinelsonslima/toast-notification\n```\n\n## 👨🏻‍💻 Modo de usar\n- Adicione o componente `\u003cToastContainer/\u003e` em algum lugar da sua aplicação;\n- Importe os estilos css de `import '@edinelsonslima/toast-notification/dist/style.css'`;\n\n```tsx\nimport { ToastContainer } from '@edinelsonslima/toast-notification';\nimport '@edinelsonslima/toast-notification/dist/style.css';\n\nexport default function App(){\n  //seu código\n\n  return (\n    \u003c\u003e\n      \u003cToastContainer /\u003e\n    \u003c/\u003e\n  )\n}\n```\n\n- Disparando os toast com a função `toast` de dentro do `@edinelsonslima/toast-notification`\n\n```tsx\nimport { toast } from '@edinelsonslima/toast-notification';\n\nexport default function MyComponent(){\n  //seu código\n\n  const exampleToast = () =\u003e {\n    toast.success({ content: \"Mensagem de exemplo\" })\n  }\n\n  return (\n    //seu código\n  )\n}\n```\n\n## 🧐 Informações adicionais\n\n\n#### O que é disponível com o pacote\n| função             | propriedades                                               |\n|--------------------|------------------------------------------------------------|\n| ToastContainer     | `classNames` `position` `defaultDuration`                  |\n| toast              | `content` `type` `duration`                                |\n| style              | `/dist/style.css`                                          |\n\n#### As propriedades da função toast\n|propriedade         | toast                                                      |\n|--------------------|----------------------------------------------------------- |\n| content            | A conteúdo que aparecerá dentro do toast                   |\n| type               | Define o tipo de toast que é para aparecer                 |\n| duration           | O tempo que o toast irá permanecer em tela                 |\n\n#### As propriedades do componente ToastContainer\n|propriedade         | ToastContainer                                             |\n|--------------------|----------------------------------------------------------- |\n| classNames         | Um objeto de **chave:valor** onde a chave é o tipo de toast e o valor pode ser uma string (classNames) ou um objeto (CSSProperties)           |\n| position           | Define em qual parte da tela irá aparecer a toast notification, existe valores predefinidos                                         |\n| defaultDuration    | Define tempo padrão de duração de todas as toast           |\n\n#### Mais detalhes sobre as propriedades\n| propriedade     |tipo     | é obrigatório   | padrão      |\n|-----------------|---------|-----------------|-------------|\n| content         |ReactNode| sim             |     -       |\n| type            |string   | sim             |     -       |\n| duration        |number   | não             | 7_0000      |\n| defaultDuration |number   | não             |     -       |\n| classNames      |object   | não             | undefined   |\n| position        |string   | não             | right-top   |\n\nℹ️ O `duration` e `defaultDuration` estão em ms (milissegundos)\n\nℹ️ A função `toast` pode ser chamada de algumas formas, veja os exemplos a seguir:\n\ncaso seja chamada direta, será obrigatório informa o **type**\n```ts\ntoast({ content: \"mensagem exemplo\", type: \"info\", duration: 1000 * 4 })\n```\nou pode acessar o tipo do toast diretamente, assim omitindo ele do objeto enviado\n```ts\ntoast.info({ content: \"mensagem exemplo\", durantino: 1000 * 4 })\n```\n```ts\ntoast.info('mensagem exemplo')\n```\n```tsx\ntoast.info(\u003cstrong\u003emensagem exemplo\u003c/strong\u003e)\n```\n```tsx\ntoast.info(\u003cMeuComponente\u003emensagem exemplo\u003c/MeuComponente\u003e)\n```\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedinelsonslima%2Ftoast-notification","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fedinelsonslima%2Ftoast-notification","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedinelsonslima%2Ftoast-notification/lists"}