{"id":28861305,"url":"https://github.com/kishorjena/react-snackbars-stack","last_synced_at":"2026-02-12T21:02:13.916Z","repository":{"id":270008893,"uuid":"908877311","full_name":"KishorJena/react-snackbars-stack","owner":"KishorJena","description":"A customizable and ready-to-use snackbar (toast) notification stack for React applications. Comes with a hook and direct usage without a hook. Built with MUI (@mui/material). NPM: https://www.npmjs.com/package/react-snackbars-stack","archived":false,"fork":false,"pushed_at":"2025-01-09T07:03:22.000Z","size":10135,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-25T10:24:40.825Z","etag":null,"topics":["alert","mui-material","notistack","react","react-notifications","react-snackbars-stack","snackbar"],"latest_commit_sha":null,"homepage":"","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/KishorJena.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":"2024-12-27T07:24:40.000Z","updated_at":"2025-01-09T07:03:25.000Z","dependencies_parsed_at":"2024-12-27T20:35:51.806Z","dependency_job_id":null,"html_url":"https://github.com/KishorJena/react-snackbars-stack","commit_stats":null,"previous_names":["kishorjena/react-snackbars-stack"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/KishorJena/react-snackbars-stack","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KishorJena%2Freact-snackbars-stack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KishorJena%2Freact-snackbars-stack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KishorJena%2Freact-snackbars-stack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KishorJena%2Freact-snackbars-stack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KishorJena","download_url":"https://codeload.github.com/KishorJena/react-snackbars-stack/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KishorJena%2Freact-snackbars-stack/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29381034,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-12T20:34:40.886Z","status":"ssl_error","status_checked_at":"2026-02-12T20:23:00.490Z","response_time":55,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: 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":["alert","mui-material","notistack","react","react-notifications","react-snackbars-stack","snackbar"],"created_at":"2025-06-20T05:06:07.687Z","updated_at":"2026-02-12T21:02:13.910Z","avatar_url":"https://github.com/KishorJena.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Snackbars Stack\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/banner.webp\" alt=\"logo\"/\u003e\n  \u003cbr/\u003e\n  \u003cimg alt=\"CI Status\" src=\"https://github.com/KishorJena/react-snackbars-stack/actions/workflows/main.yml/badge.svg\"\u003e\n  \u003cimg alt=\"NPM Version\" src=\"https://img.shields.io/npm/v/react-snackbars-stack\"\u003e\n  \u003ca href=\"https://x.com/heyKSR\" target=\"_blank\"\u003e\n    \u003cimg alt=\"X (formerly Twitter) Follow\" src=\"https://img.shields.io/twitter/follow/heyKSR\"\u003e\n  \u003c/a\u003e\n  \u003cp align=\"center\"\u003eReact Snackbars Stack to show multiple snackbars as queue/stack\u003c/p\u003e\n\u003c/p\u003e\n\n## Description\n\nReact Snackbars Stack is a flexible and easy-to-use library for displaying snackbars in your React applications. It provides a simple API to show notifications with different severities and customizable options. Whether you need to show a single snackbar or manage a stack of multiple snackbars, this library has you covered.\n\n## Installation\n\nInstall the package using npm or yarn:\n\n```bash\nnpm install react-snackbars-stack\n# or\nyarn add react-snackbars-stack\n```\n\n## Usage\n\n### Option 1: Direct Use\n\nImport the `SnackbarProvider` and wrap your application with it. Use the `enqueueSnackbar` method to show snackbars.\n\n\u003e **🚀 Important Note:** You don't need to wrap your entire application with the `SnackbarProvider` context. You can use it directly in any component by placing it inside the render method, such as the return statement in a function component or the render method in a class component.\n\n```jsx\nimport React from 'react';\nimport { SnackbarProvider, enqueueSnackbar } from 'react-snackbars-stack';\n\nfunction App() {\n  const handleClick = () =\u003e {\n    enqueueSnackbar('This is a snackbar message!');\n    // OR\n    enqueueSnackbar(\n      'This is a snackbar message with applied options!', \n      {\n        severity:'success', // inof, success, warning, error\n        preventDuplicate:true,\n        duration:1500\n      }\n    );\n  };\n\n  return (\n    \u003c\u003e\n      \u003cSnackbarProvider /\u003e {/* Check API for options */}\n      \u003cbutton onClick={handleClick}\u003eShow Snackbar\u003c/button\u003e\n    \u003c/\u003e\n  );\n}\n\nexport default App;\n```\n\n### Option 2: Using Hook\n\nWrap your root app or a specific parent app with the `SnackbarProvider` context. Import the hook in a child component to use the method to show snackbars.\n\n```jsx\nimport React from 'react';\nimport { SnackbarProvider, useSnackbar } from 'react-snackbars-stack';\n\nfunction MyComponent() {\n  const { enqueueSnackbar } = useSnackbar();\n\n  const handleClick = () =\u003e {\n    enqueueSnackbar(...);\n  };\n\n  return (\n    \u003c\u003e\n      \u003cbutton onClick={handleClick}\u003eShow Snackbar\u003c/button\u003e\n    \u003c/\u003e\n  );\n}\n\nconst App = () =\u003e (\n  \u003cSnackbarProvider\u003e\n    \u003cMyComponent /\u003e\n  \u003c/SnackbarProvider\u003e\n);\n\nexport default App;\n```\n\n## NextJS support \nIf you're using Next.js and need to integrate the react-snackbars-stack package into your root layout (or any server component), you’ll need to handle the use client directive. This is required because the context provider relies on React hooks, which are incompatible with server components by default. \n\nCreate a Wrapper Component, e.g., SnackbarProviderWrapper.jsx, with the `use client` directive.\n```jsx\n'use client';\n\nimport { SnackbarProvider } from 'react-snackbars-stack';\n\nexport default SnackbarProvider;\n```\n\n## Screenshot\n\n![screenshot](assets/screenshot.webp)\n\n## API\n\n### `enqueueSnackbar` Method\n\nThe `enqueueSnackbar` method is used to show a snackbar notification. If there are already some snackbars being displayed, it adds the snackbar above or below the existing snackbars in the stack.\n\n| Option           | Type    | Description                          | Default |\n|------------------|---------|--------------------------------------|---------|\n| message          | string  | The message to display               | -       |\n| severity         | string  | The severity of the message          | 'info'  |\n| preventDuplicate | boolean | Prevent duplicate messages           | false   |\n| duration         | number  | Duration to show the snackbar (ms)   | 3000    |\n\n### `SnackbarProvider` Component\n\nThe `SnackbarProvider` component is used to wrap your application and provide the snackbar context.\n\n| Option           | Type    | Description                          | Default |\n|------------------|---------|--------------------------------------|---------|\n| maxSnackbars     | number  | Maximum number of snackbars to show  | 3       |\n| autoHideDuration | number  | Duration to auto-hide the snackbar   | 3000    |\n| icon             | boolean | Hide the icon in the snackbar        | true    |\n| theme            | string  | Theme of the snackbar ('dark' or 'light') | 'light' |\n| anchorOrigin     | object  | Position of the snackbar                  | { vertical: 'bottom', horizontal: 'left' } |\n| transitionType   | string  | Transition type for the snackbar ('slide', 'grow', 'fade', 'zoom') | 'slide' |\n\n## TODO\n\n- [x] Custom hook support\n- [x] Theme switching (MUI based)\n- [ ] Filled icons option\n- [ ] Custom theming support\n- [ ] Custom transitions\n\n**Purpose:** Created for personal use due to Notistack's outdated dependencies causing deployment issues. Published for anyone seeking an alternative to Notistack (though this package is not superior to Notistack).\n\n## Connect with Us\n\nFeel free to reach out:\n- [Twitter](https://x.com/heyKSR)\n- [LinkedIn](https://www.linkedin.com/in/kishorjena)\n\n## Contribution\n\nContributions are welcome! Please open an issue or submit a pull request on GitHub.\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkishorjena%2Freact-snackbars-stack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkishorjena%2Freact-snackbars-stack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkishorjena%2Freact-snackbars-stack/lists"}