React Cheers
A zero-dependency, extensible notification system built with the React 16.3 Context API.
Installation
-
npm install --save react-cheers
-
Install
Provider
&Composer
component as early as possible.
; const App = <Fragment> <Provider> <MyApplication /> <Composer /> </Provider> </Fragment>; reactDom;
- Access the notifications state & actions from within any component in your React tree using either:
- Option 1: Use the
withNotifications
HoC to automatically pass all context props to your component.
const MyComponent = notifications<Array> expire<Function> dispatch<Function> <button onClick=>Send!</button> ; MyComponent;
- Option 2: Access the
Context
directly to select specific props. React Context uses "render props" to emit state.
const MyComponent = <NotificationContext> notifications<Array> expire<Function> dispatch<Function> <button onClick=>Send!</button> </NotificationContext>; ;
Usage
Notification
A notification object is made up of the following parameters.
kind : enum('notification', 'success', 'error', 'warning')
- Denotes the kind of notification, primarily used for stylingmessage : string
- The message contentsid (optional) : number | string
- Optionally specify an ID. If null, falls back to dateTime. (NOTE: This library prevents dispatching notifications with duplicate Ids)expires (optional) : number
- The time inms
until notification is expired. Ifnull
, notification will not auto-dismiss.
Props
This library provides three primary mechanisms for interacting with notifications.
notifications : Array<Notification>
- The array of current notificationsdispatch(Notification) : Function
- The action to create/dispatch a new notificationexpire(Id) : Function
- the action to expire/dismiss/destroy a notification
Configuration Options
defaultExpires
can specify a default expires time for all notificationsdefaultKind
can specify a default "kind"
<Provider defaultExpires=8000 defaultKind='error'>
Contributing
WIP
Tests
WIP