{"id":23442243,"url":"https://github.com/teamwertarbyte/material-ui-snackbar-provider","last_synced_at":"2025-04-13T08:41:11.597Z","repository":{"id":24043938,"uuid":"100464969","full_name":"TeamWertarbyte/material-ui-snackbar-provider","owner":"TeamWertarbyte","description":"A convenient way to use material-ui's snackbars.","archived":false,"fork":false,"pushed_at":"2023-01-03T00:06:05.000Z","size":3596,"stargazers_count":81,"open_issues_count":10,"forks_count":17,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-02T22:36:01.439Z","etag":null,"topics":["material-ui","react","snackbar"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/TeamWertarbyte.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["leMaik","saschb2b"]}},"created_at":"2017-08-16T08:12:52.000Z","updated_at":"2024-01-23T11:34:08.000Z","dependencies_parsed_at":"2023-01-14T00:18:10.023Z","dependency_job_id":null,"html_url":"https://github.com/TeamWertarbyte/material-ui-snackbar-provider","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TeamWertarbyte%2Fmaterial-ui-snackbar-provider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TeamWertarbyte%2Fmaterial-ui-snackbar-provider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TeamWertarbyte%2Fmaterial-ui-snackbar-provider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TeamWertarbyte%2Fmaterial-ui-snackbar-provider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TeamWertarbyte","download_url":"https://codeload.github.com/TeamWertarbyte/material-ui-snackbar-provider/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248686496,"owners_count":21145502,"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":["material-ui","react","snackbar"],"created_at":"2024-12-23T17:29:02.272Z","updated_at":"2025-04-13T08:41:11.575Z","avatar_url":"https://github.com/TeamWertarbyte.png","language":"JavaScript","funding_links":["https://github.com/sponsors/leMaik","https://github.com/sponsors/saschb2b"],"categories":[],"sub_categories":[],"readme":"# Material-UI Snackbar Provider\n[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n[![Build Status](https://travis-ci.org/TeamWertarbyte/material-ui-snackbar-provider.svg)](https://travis-ci.org/TeamWertarbyte/material-ui-snackbar-provider)\n[![Coverage Status](https://coveralls.io/repos/github/TeamWertarbyte/material-ui-snackbar-provider/badge.svg?branch=master)](https://coveralls.io/github/TeamWertarbyte/material-ui-snackbar-provider?branch=master)\n\nA convenient way to use [material-ui][]'s snackbars.\n\n## Installation\n```shell\nnpm i --save material-ui-snackbar-provider\n```\n\n## Usage\nSimply wrap all components that should display snackbars with the `SnackbarProvider` component,\ne.g. by wrapping your router with it.\n\n```js\nimport { SnackbarProvider } from 'material-ui-snackbar-provider'\n\n// somewhere at the root of your app\n\u003cSnackbarProvider SnackbarProps={{ autoHideDuration: 4000 }}\u003e\n  {/* the rest of your app belongs here, e.g. the router */}\n\u003c/SnackbarProvider\u003e\n```\n\nYou can then display messages with the `useSnackbar` hook. More examples [can be found here](https://github.com/TeamWertarbyte/material-ui-snackbar-provider/tree/master/stories).\n\n```js\nimport { useSnackbar } from 'material-ui-snackbar-provider'\n\nexport default function MyComponent (props) {\n  const snackbar = useSnackbar()\n\n  const handleSomething = () =\u003e {\n    snackbar.showMessage(\n      'Something happened!',\n      'Undo', () =\u003e handleUndo()\n    )\n  }\n\n  const handleUndo = () =\u003e {\n    // *snip*\n  }\n\n  return (\n    // *snip*\n  )\n}\n```\n\nIf you're not using React ^16.8.0 and our you can't use hooks (e.g. in a class component), you can use the `withSnackbar` HOC and the injected `snackbar` prop instead.\n\n```js\nimport { withSnackbar } from 'material-ui-snackbar-provider'\n\nclass MyComponent {\n  // *snip*\n\n  handleSomething () {\n    this.props.snackbar.showMessage(\n      'Something happened!',\n      'Undo', () =\u003e this.handleUndo())\n  }\n\n  handleUndo () {\n    // *snip*\n  }\n}\n\nexport default withSnackbar()(MyComponent) // export the wrapped component\n```\n\n### Snackbar variants\nSnackbar variants (i.e. diffent styles for different types of messages) can be implemented using the `Alert` component from `@material-ui/lab`. An example that also adds a custom hook to display snackbars with different severities is available [here](https://github.com/TeamWertarbyte/material-ui-snackbar-provider/tree/master/stories/1-custom.stories.js).\n\n### SnackbarProvider Props\n|Name            |Type        |Default     |Description\n|----------------|------------|------------|--------------------------------\n|ButtonProps|`object`||Props to pass through to the action [button][mui-button].\n|children|`node`||The children that are wrapped by this provider.\n|SnackbarComponent|`ReactElement`||Custom snackbar component.\n|SnackbarProps|`object`||Props to pass through to the [snackbar][mui-snackbar].\n\n\\* required property\n\n[mui-button]: https://material-ui.com/api/button/\n[mui-snackbar]: https://material-ui.com/api/snackbar/\n\n### Snackbar methods\n`snackbar.showMessage(message, [action, handler, customParameters, closeWithoutActionHandler])`\n* `message` (string) – message to display\n* `action` (string, _optional_) – label for the action button\n* `handler` (function, _optional_) – click handler for the action button\n* `customParameters` (any, _optional_) - custom parameters that will be passed to the snackbar renderer\n* `closeWithoutActionHandler` (function, _optional_) - function that is called when the snackbar hides and the action button was not clicked\n\n## Concerns\n\u003e Dude, this is not pretty React-like, I don't want to call a function to do something that changes the UI! I want to display a snackbar based on the state only, e.g. by using Redux.\n\nI agree. And if it wouldn't be an absolute pain to do that if you intend to display more than one snackbar, this package wouldn't even exist. The thing is that most of the time, snackbars are displayed when state _changes_ and not really depend on the _state_ itself.\n\nAlso, calling a method after dispatching the action is pretty convenient, especially when using something like [redux-thunk][]:\n\n```js\ndeleteEmail (id) {\n  this.props.dispatch(someReduxThunkAction())\n  .then(() =\u003e {\n    this.snackbar.showMessage(\n      'E-mail deleted',\n      'Undo', () =\u003e this.restoreEmail(id))\n  })\n  .catch((e) =\u003e {\n    this.snackbar.showMessage(\n      'E-mail could not be deleted',\n      'Retry', () =\u003e this.deleteEmail(id))\n  })\n}\n```\n\nSo this package makes snackbars a lot easier to use, which is all it's intended to do.\n\n[material-ui]: https://material-ui.com/\n[redux-thunk]: https://github.com/gaearon/redux-thunk\n\n## License\n\nThe files included in this repository are licensed under the MIT license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteamwertarbyte%2Fmaterial-ui-snackbar-provider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fteamwertarbyte%2Fmaterial-ui-snackbar-provider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteamwertarbyte%2Fmaterial-ui-snackbar-provider/lists"}