@caesium/hook-notifications

Notifications Hook

Install

npm install --save @caesium/hook-notifications

Usage

There are 3 exported properties that are needed at a minimum useNotify, useNotifications and Notifications.

At the top level of your app add Notifications as a wrapper around everything. e.g.

import React from 'react'
import {Notifications} from '@caesium/hook-notifications'

export const App: React.FC = ({children}) => {
  return <Notifications>
    {children}
  </Notifications>
}

In your notifications component use useNotifications to get a list of notifications and the removeNotification function to remove them.

import React from 'react'
import {useNotifications} from '@caesium/hook-notifications'

export const NotificationsComponent: React.FC = () => {
  const {notifications, removeNotification} = useNotifications()

  return <div>
    {notifications.map((notification) => {
      return <div key={notification.uuid} onClick={() => {
        removeNotification(notification.uuid)
      }}>
        <h6>{notification.title}</h6>
        <p>{notification.message}</p>
      </div>
    })}
  </div>
}

From any component that needs to create a notification you use useNotify to get the notify function.

import React from 'react'
import {useNotify} from '@caesium/hook-notifications'

export const ButtonPresser: React.FC = () => {
  const {notify} = useNotify()

  return <div>
    <button onClick={() => {
      notify({
        title: 'Foo',
        message: 'bar'
      })
    }}>Notify Me</button>
  </div>
}

You can change the type of the notifications by re-exporting the two hooks from another file in your code.

import {useNotify as notify, UseNotifyFunction, useNotifications as notifications, UseNotificationsFunction} from './hook-notifications'

interface NewNotification{
  title: string
  message: string
  icon: string
}

interface Notification extends NewNotification{
  uuid: string
}

export const useNotify: UseNotifyFunction<NewNotification> = () => {
  return notify()
}

export const useNotifications: UseNotificationsFunction<Notification> = () => {
  return (notifications() as any)
}