Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/joeattardi/react-snackbar-alert
Simple snackbar-style notifications for React
https://github.com/joeattardi/react-snackbar-alert
component javascript notification notifications react reactjs snackbar ui
Last synced: 2 months ago
JSON representation
Simple snackbar-style notifications for React
- Host: GitHub
- URL: https://github.com/joeattardi/react-snackbar-alert
- Owner: joeattardi
- License: mit
- Archived: true
- Created: 2019-05-23T04:38:09.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-03-14T23:11:55.000Z (almost 5 years ago)
- Last Synced: 2024-08-02T19:34:02.625Z (6 months ago)
- Topics: component, javascript, notification, notifications, react, reactjs, snackbar, ui
- Language: JavaScript
- Homepage: https://joeattardi.github.io/react-snackbar-alert/
- Size: 4.63 MB
- Stars: 28
- Watchers: 4
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-components - react-snackbar-alert - [demo](https://joeattardi.github.io/react-snackbar-alert/) - Simple snackbar notifications. Uses Context API. (UI Components / Notification)
- awesome-react-components - react-snackbar-alert - [demo](https://joeattardi.github.io/react-snackbar-alert/) - Simple snackbar notifications. Uses Context API. (UI Components / Notification)
README
# react-snackbar-alert
Simple snackbar-style notifications for React
[](https://npmjs.com/package/react-snackbar-alert)
[](https://circleci.com/gh/joeattardi/react-snackbar-alert)
## Prerequisites
React Snackbar Alert requires React 16.8.0 or newer and styled-components 4 as peer dependencies:
npm install --save react react-dom styled-components
## Installation
npm install --save react-snackbar-alert
## API & Examples
[https://joeattardi.github.io/react-snackbar-alert/](https://joeattardi.github.io/react-snackbar-alert/)
## Usage
Snackbar notifications in 3 easy steps:
1. Import the `SnackbarProvider` component and the `wrapComponent` helper
2. Wrap your application in the `SnackbarProvider` and pass any desired configuration props
3. 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.
### Example
```javascript
import React from 'react';
import { SnackbarProvider, wrapComponent } from 'react-snackbar-alert';
export default function App() {
return (
);
}
const Container = wrapComponent(function({ createSnackbar }) {
function showSnackbar() {
createSnackbar({
message: 'Helo Snackbar!'
});
}
return (
Show Snackbar
)
});
```
## Options
### `SnackbarProvider` Props
The `SnackbarProvider` accepts the following props:
Unless 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`.
- `animationTimeout` - The duration of the show and hide animations, in milliseconds (default: `500`)
- `component` - A custom component to use instead of the built-in `Snackbar` component. **Cannot be overridden for a specific snackbar.**
- `dismissable` - Whether or not the created snackbars can be manually dismissed by the user
- `pauseOnHover` - Whether or not a snackbar's timeout should be paused when it is hovered over (default: false)
- `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.**
- `progressBar` - Whether or not to show an animated progress bar showing the time before a snackbar is removed (default: `true`)
- `sticky` - Whether or not snackbars should be sticky (not automatically removed) (default: `false`)
- `timeout` - The time before a snackbar is removed, in milliseconds (default: `3000`)
### `createSnackbar` Options
The `createSnackbar` function accepts an options object, which can have the following properties:
- `animationTimeout` - The duration of the show and hide animations
- `data` - Custom data to use when rendering a custom snackbar
- `dismissable` - Whether or not this snackbar can be manually dismissed by the user
- `message` - The message to display
- `pauseOnHover` - Whether or not to pause this snackbar on hover
- `progressBar` - Whether or not to show the progress bar for this snackbar
- `sticky` - Whether or not this snackbar should be sticky. Sticky snackbars are not automatically removed.
- `theme` - The theme to use for this snackbar. One of `default`, `info`, `success`, `warning`, `error` (default: `default`)
- `timeout` - The time before this snackbar is removed