Skip to content

intercaetera/react-use-message-bar

Repository files navigation

react-use-message-bar

Travis npm package Coveralls

A simple message bar hook for React. Read more about it in the blog post.

Installation

npm install --save react-use-message-bar

Usage

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.