@oerlikon/notification

@oerlikon/notification

Provides a simple react hook for app frame notifications

api

useNotification exposes 4 methods:

• showInfo(text, options) (blue)
• showSuccess(text, options) (green)
• showWarning(text, options) (yellow)
• showError(text, options) (red)

Each method works exactly identical except for the different severity.

text (required) the text to display

options (optional):

• identifier: (optional) notification id to ensure the notification is only displayed once
• autHide: (optional) if a number (duration in ms) is provided, the notification will automatically disappear. If false is provided, the user has to dismiss the notification manually. (default: 3000ms)
• actions: An array of actions (buttons) for the user to interact with. Every action will cause the notification to disappear. If no actions are provided, the notification will show a dismiss icon.

interface Options {
  identifier?: string;
  autoHide?: number | false;
  actions?: Action[];
}

interface Action {
  label: stirng
  onClick?: () => void
}

example

This example shows a warning notification that requires the user to confirm the action

import React from 'react';
import { useNotification } from '@oerlikon/notification';

export const User = () => {

  const { showWarning } = useNotification();

  cosnt handleClick = () => {
    showWarning('This text is shown to the user', {
      autoHide: false,
      actions: [
        {
          label: 'Yes!',
          onClick: () => console.log('user clicked yes')
        },
        {
          label: 'No!',
          onClick: () => console.log('user clicked no');
        }
      ]
    });
  };

  return (
    <button type="button" onClick={handleClick}>Show notification</button>
  );
}