{"id":13604404,"url":"https://github.com/joeattardi/react-snackbar-alert","last_synced_at":"2025-04-12T02:30:27.309Z","repository":{"id":57345005,"uuid":"188162356","full_name":"joeattardi/react-snackbar-alert","owner":"joeattardi","description":"Simple snackbar-style notifications for React","archived":true,"fork":false,"pushed_at":"2020-03-14T23:11:55.000Z","size":4854,"stargazers_count":28,"open_issues_count":4,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-18T13:22:19.435Z","etag":null,"topics":["component","javascript","notification","notifications","react","reactjs","snackbar","ui"],"latest_commit_sha":null,"homepage":"https://joeattardi.github.io/react-snackbar-alert/","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/joeattardi.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-05-23T04:38:09.000Z","updated_at":"2023-01-28T14:49:32.000Z","dependencies_parsed_at":"2022-09-12T06:30:48.540Z","dependency_job_id":null,"html_url":"https://github.com/joeattardi/react-snackbar-alert","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joeattardi%2Freact-snackbar-alert","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joeattardi%2Freact-snackbar-alert/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joeattardi%2Freact-snackbar-alert/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joeattardi%2Freact-snackbar-alert/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joeattardi","download_url":"https://codeload.github.com/joeattardi/react-snackbar-alert/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248506901,"owners_count":21115503,"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":["component","javascript","notification","notifications","react","reactjs","snackbar","ui"],"created_at":"2024-08-01T19:00:45.099Z","updated_at":"2025-04-12T02:30:26.956Z","avatar_url":"https://github.com/joeattardi.png","language":"JavaScript","funding_links":[],"categories":["UI Components","\u003csummary\u003eUI Components\u003c/summary\u003e"],"sub_categories":["Notification"],"readme":"# react-snackbar-alert\nSimple snackbar-style notifications for React\n\n[![npm](https://img.shields.io/npm/v/react-snackbar-alert.svg)](https://npmjs.com/package/react-snackbar-alert)\n\n[![CircleCI](https://circleci.com/gh/joeattardi/react-snackbar-alert.svg?style=svg)](https://circleci.com/gh/joeattardi/react-snackbar-alert)\n\n![Demo video](https://github.com/joeattardi/react-snackbar-alert/blob/master/snackbar.gif?raw=true)\n\n## Prerequisites\n\nReact Snackbar Alert requires React 16.8.0 or newer and styled-components 4 as peer dependencies:\n\n    npm install --save react react-dom styled-components\n\n## Installation\n\n    npm install --save react-snackbar-alert\n\n## API \u0026 Examples\n\n[https://joeattardi.github.io/react-snackbar-alert/](https://joeattardi.github.io/react-snackbar-alert/)\n\n## Usage\n\nSnackbar notifications in 3 easy steps:\n\n1. Import the `SnackbarProvider` component and the `wrapComponent` helper\n2. Wrap your application in the `SnackbarProvider` and pass any desired configuration props\n3. Wrap any components you want to create snackbars from by passing them to the `wrapComponent` helper. This will pass a `createSnackbar` prop to the passed component which can be used to show a snackbar notification.\n\n### Example\n\n```javascript\n  import React from 'react';\n\n  import { SnackbarProvider, wrapComponent } from 'react-snackbar-alert';\n\n  export default function App() {\n    return (\n      \u003cSnackbarProvider\u003e\n        \u003cContainer /\u003e\n      \u003c/SnackbarProvider\u003e\n    );\n  }\n\n  const Container = wrapComponent(function({ createSnackbar }) {\n    function showSnackbar() {\n      createSnackbar({\n        message: 'Helo Snackbar!'\n      });\n    }\n\n    return (\n      \u003cdiv\u003e\n        \u003cbutton onClick={showSnackbar}\u003eShow Snackbar\u003c/button\u003e\n      \u003c/div\u003e\n    )\n  });\n```\n\n## Options\n\n### `SnackbarProvider` Props\n\nThe `SnackbarProvider` accepts the following props:\n\nUnless otherwise noted, any of these props can be overridden for a specific snackbar instance by adding that same property to the object passed to `createSnackbar`.\n\n- `animationTimeout` - The duration of the show and hide animations, in milliseconds (default: `500`)\n- `component` - A custom component to use instead of the built-in `Snackbar` component. **Cannot be overridden for a specific snackbar.**\n- `dismissable` - Whether or not the created snackbars can be manually dismissed by the user\n- `pauseOnHover` - Whether or not a snackbar's timeout should be paused when it is hovered over (default: false)\n- `position` - The position on screen to show the snackbars. One of `top`, `top-left`, `top-right`, `bottom`, `bottom-left`, `bottom-right` (default: `bottom`). **Cannot be overridden for a specific snackbar.**\n- `progressBar` - Whether or not to show an animated progress bar showing the time before a snackbar is removed (default: `true`)\n- `sticky` - Whether or not snackbars should be sticky (not automatically removed) (default: `false`)\n- `timeout` - The time before a snackbar is removed, in milliseconds (default: `3000`)\n\n### `createSnackbar` Options\n\nThe `createSnackbar` function accepts an options object, which can have the following properties:\n\n- `animationTimeout` - The duration of the show and hide animations\n- `data` - Custom data to use when rendering a custom snackbar\n- `dismissable` - Whether or not this snackbar can be manually dismissed by the user\n- `message` - The message to display\n- `pauseOnHover` - Whether or not to pause this snackbar on hover\n- `progressBar` - Whether or not to show the progress bar for this snackbar\n- `sticky` - Whether or not this snackbar should be sticky. Sticky snackbars are not automatically removed.\n- `theme` - The theme to use for this snackbar. One of `default`, `info`, `success`, `warning`, `error` (default: `default`)\n- `timeout` - The time before this snackbar is removed\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoeattardi%2Freact-snackbar-alert","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoeattardi%2Freact-snackbar-alert","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoeattardi%2Freact-snackbar-alert/lists"}