useNotification is a custom hook to handle toast like adding/removing of Alert and Snackbar.

import { useNotification, AlertAction } from '@wpmedia/arc-ui-notification'

Return value

The useNotification hook returns:

notify

notify(message: string, options?: NotifyOptions): number

interface NotifyOptions

Props	Description
actions (optional)	undefined | Element | [Element, Element] Actions are passed through to the underlying Alert type. The value(s) of this prop should be AlertActions. By default, a user clicking any action will dismiss the Alert, but by including the prop preventClose={true} in the AlertAction, you can override this behavior so the Alert persists.
duration (optional)	3000 | 4000 | 5000 | 6000 | 7000 | 8000 | 9000 | 10000 = 3000 Optional from 3-10s. If type is alert, this option will be ignored as alerts are not transient
status (optional)	undefined | "warning" | "publish" | "success" | "base" | "info" | "error" = base Status reflects the color of the alert
type (optional)	"alert" | "snack" = snack Variant of the alert: Alert or Snackbar

close

close(alertId: number): void

The alert id is returned from the notify method.

Usage

Alert

function Notify() { const { notify } = useNotification() return ( <> <Button onClick={() => notify( 'This is an alert type that must be dismissed before it closes', { type: 'alert', status: 'error', actions: <AlertAction>Dismiss</AlertAction>, }, ) } > Make simple alert </Button>{' '} <Button onClick={() => notify('This is an alert with a second action', { type: 'alert', status: 'error', actions: [ <AlertAction>Dismiss</AlertAction>, <AlertAction onClick={() => alert('hi there')}> Greet me </AlertAction>, ], }) } > Make two-action alert </Button>{' '} <Button onClick={() => notify('This is a persistent alert', { type: 'alert', status: 'error', actions: [ <AlertAction>Dismiss</AlertAction>, <AlertAction onClick={() => { document.body.style.background = '#' + Math.random().toString(16).substr(-6) }} preventClose={true} > Change background </AlertAction>, ], }) } > Make two-action persistent alert </Button> </> ) }

function Notify() {
  const { notify } = useNotification()
  return (
    <>
      <Button
        onClick={() =>
          notify(
            'This is an alert type that must be dismissed before it closes',
            {
              type: 'alert',
              status: 'error',
              actions: <AlertAction>Dismiss</AlertAction>,
            },
          )
        }
      >
        Make simple alert
      </Button>{' '}
      <Button
        onClick={() =>
          notify('This is an alert with a second action', {
            type: 'alert',
            status: 'error',
            actions: [
              <AlertAction>Dismiss</AlertAction>,
              <AlertAction onClick={() => alert('hi there')}>
                Greet me
              </AlertAction>,
            ],
          })
        }
      >
        Make two-action alert
      </Button>{' '}
      <Button
        onClick={() =>
          notify('This is a persistent alert', {
            type: 'alert',
            status: 'error',
            actions: [
              <AlertAction>Dismiss</AlertAction>,
              <AlertAction
                onClick={() => {
                  document.body.style.background =
                    '#' + Math.random().toString(16).substr(-6)
                }}
                preventClose={true}
              >
                Change background
              </AlertAction>,
            ],
          })
        }
      >
        Make two-action persistent alert
      </Button>
    </>
  )
}

Copy

Snackbar

function Snack() { const { notify } = useNotification() return <Button onClick={() => notify('I am a snackbar')}>Make snack</Button> }

function Snack() {
  const { notify } = useNotification()
  return <Button onClick={() => notify('I am a snackbar')}>Make snack</Button>
}

Copy

AlertAction

AlertActions are a small extension to the Button component for use in the actions array of an Alert or a Snackbar. By default, clicking on an AlertAction closes the parent Alert or Snackbar.

Alerts take either one or two AlertActions, while Snackbars take either zero or one.

An AlertAction supports all the same props as a Button, with the addition of preventClose, used to indicate that the parent Alert or Snackbar should not close when the action is taken. See above examples.