Notifications

Render notification message at the top level of your DOM, from anywhere in your app.

Installation

yarn add @alexseitsinger/react-notifications

Exports

NotificationsProvider

Add a DOM element at the root of your app (at the bottom). Each notification rendered will be placed within this container. for each provided notification to be rendered within.

Props

Name	Description	Default	Required?
displayInterval	The time(ms) to show each notification before removing the oldest.	undefined	yes
renderNotification	Invoked to render each notification.	undefined	yes

Example

// In app root
import { NotificationsProvider } from "@alexseitsinger/react-notifications"

// Re-use a render method for each notification.
// Use this to render each notification with the same template.
const renderNotification = (element) => (
  <div>{element}</div>
)

// Add the provider to the app root. It will add a mount point into the DOM for the notifications to render within.
const App = () => (
  <NotificationsProvider renderNotification={renderNotification} displayInterval={3000}>
    <Router>
      <Route path={"/"} exact component={HomePage} />
    </Router>
  </NotificationsProvider>
)

withNotifications

HOC that provides notifications props to a component.

Notification Props Provided:

Name	Description
NotificationMessage	Component used to render notification messages.
createNotificationMessage	Function to create notification messages. (Useful for button callback, etc.)
clearCachedNotifications	Clears the cached notification names. (Setting isForced to true ignores this cache)
clearNotifications	Removes all the currently renderd notifications.

NotificationMessage (via withNotifications)

Component used to create new notification messages. NOTE: isForced is automatically set to false for this to prevent render loops.

Props

Name	Description	Deafault	Required?
notificationName	The unique name of the notification.	undefined	yes
isRepeated	Show multiple copies of the same message	false	no
children	The content to render as the notification	undefined	yes

Example

import { withNotifications } from "@alexseitsinger/react-notifications"

const HomePage = withNotifications(({ NotificationMessage }) => (
  <div id="homePage">
    <div> Some normal content</div>
    <NotificationMessage notificationName={"home-page-render-notification"} isRepeated={false}>
      This notification gets displayed once.
    </NotificationMessage>
  </div>
))

createNotificationMessage (via withNotifications)

Function used to create a new notification message.

Props

Name	Description	Default	Required?
notificationName	The unique name of the notification.	undefined	yes
isForced	Should the notification be shown if it already was previously?	false	no
isRepeated	Show multiple copies of the same message	false	no
onRender	Invoked to render the notification message	undefined	yes

Example

// In a page component, etc.
import { withNotifications } from "@alexseitsinger/react-notifications"

const HomePage = () => withNotifications(
  ({ createNotificationMessage, ...restProps }) => {
    return (
      <PageContainer>
        <div>Some normal page content</div>
        <button onClick={() => {
          createNotificationMessage({
            notificationName: "on-click-success-notification-1",
            onRender: () => <div>You did it!</div>,
            isForced: true,
            isRepeated: false,
          })
        }}>
          Click to do action
        </button>
      </PageContainer>
    )
  }
)