Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/intercaetera/react-use-message-bar
A simple message bar hook for React
https://github.com/intercaetera/react-use-message-bar
hacktoberfest notifications office-ui-fabric react
Last synced: about 1 month ago
JSON representation
A simple message bar hook for React
- Host: GitHub
- URL: https://github.com/intercaetera/react-use-message-bar
- Owner: intercaetera
- License: mit
- Created: 2019-12-21T14:37:17.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-10-11T19:36:26.000Z (about 3 years ago)
- Last Synced: 2024-07-31T07:15:41.582Z (4 months ago)
- Topics: hacktoberfest, notifications, office-ui-fabric, react
- Language: JavaScript
- Homepage: https://www.intercaetera.com/posts/react-message-bar
- Size: 559 KB
- Stars: 10
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-react-hooks - `react-use-message-bar`
- awesome-react-hooks-cn - `react-use-message-bar`
- awesome-react-hooks - `react-use-message-bar`
- awesome-react-hooks - `react-use-message-bar`
README
# react-use-message-bar
[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[![Coveralls][coveralls-badge]][coveralls]
A simple message bar hook for React. Read more about it in the [blog post](https://intercaetera.com/2020-01-31-the-story-of-react-use-message-bar/).
## Installation
```
npm install --save react-use-message-bar
```
## Usage
```js
import { useMessageBar, MessageBarSlotFactory } from 'react-use-message-bar';
const MessageBarSlot = MessageBarSlotFactory();
const Demo = () => {
const { createNotification, props } = useMessageBar();
const handleClick = () => createNotification(Date.now());
return (
Create Bar
);
};
```
## API
### `useMessageBar`
This hook returns an object with the following properties:
- `createNotification(content, initialId)` - creates a notification
- `content` (string or component) - the content of the notification
- `initialId` (any, optional) - a unique id of the notification, if empty `shortid` will be used internally.
- `deleteNotification(id)` - deletes a notification with a given id
- `deleteAllNotifications()` - deletes all notifications
- `props` - an object that should be passed to the `MessageBarSlot` to render the notifications properly.
- `bars` - an array of `{ id, content }` objects that represent the currently displayed bars.
### `MessageBarSlotFactory`
This is a function that creates a MessageBarSlot component that will render given message bars. It accepts one argument - a `MessageBar` component that will be rendered.
The `MessageBar` component is injected with two props:
- `handleDismiss` - a function that should be called when the user would dismiss the bar, for instance by clicking a "close" button.
- `children` - the content of the message bar.
The `DefaultMessageBar` component will be used if the `MessageBar` is not provided - see the source for an example how to build it.
[build-badge]: https://travis-ci.org/intercaetera/react-use-message-bar.svg?branch=master
[build]: https://travis-ci.org/intercaetera/react-use-message-bar
[npm-badge]: https://img.shields.io/npm/v/react-use-message-bar.png?style=flat-square
[npm]: https://www.npmjs.org/package/react-use-message-bar
[coveralls-badge]: https://coveralls.io/repos/github/intercaetera/react-use-message-bar/badge.svg?branch=master
[coveralls]: https://coveralls.io/github/intercaetera/react-use-message-bar