# react-use-message-bar

> useMessageBar React Hook

Latest version **2.0.0** (published 2021-10-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-use-message-bar
pnpm add react-use-message-bar
yarn add react-use-message-bar
bun add react-use-message-bar
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2021-10-11 |
| First published | 2019-12-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 18.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | intercaetera |
| Keywords | react, react hook, hook, message bar |

## Links

- npm: https://www.npmjs.com/package/react-use-message-bar
- npm.io page: https://npm.io/package/react-use-message-bar

## Dependencies (1)

- [shortid](https://npm.io/package/shortid.md) ^2.2.16

## Recent versions

- 2.0.0 (latest) — 2021-10-11
- 1.0.1 — 2019-12-22

## 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 (
		<div>
			<MessageBarSlot {...props} />
			<button onClick={handleClick}>Create Bar</button>
		</div>
	);
};
```


## 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

---
_Source: https://npm.io/package/react-use-message-bar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._