@tdcerhverv/notification v0.3.2

Notification component

Usage

Example of App component:

import { NotificationProvider, Notification } from '@tdcerhverv/notification';

export default function AppExample() {
  return return (
    <NotificationProvider>
      <Notification />
      ...
    </NotificationProvider>
  );
}

Example of component using useNotification() hook to show a notification:

import { NotificationTypes, useNotification } from '@tdcerhverv/notification';
export default function NotificationExample() {
  const notification = useNotification();

  const handleSubmit = async () => {
    const [error, result] = await request(someRequest);

    if (error) {
      notification.dispatch({
        type: 'Show',
        payload: {
          type: NotificationTypes.NEGATIVE,
          message: 'Something went wrong ❌',
        },
      });
    }

    if (result) {
      notification.dispatch({
        type: 'Show',
        payload: {
          type: NotificationTypes.POSITIVE,
          autoHideMilliseconds: 3000,
          message: 'All good 👍',
        },
      });
    }
  };

  return return (
    <form onSubmit={handleSubmit}>
      ...
      <DefaultButton type="submit">Submit</DefaultButton>
    </form>
  );
}

Props

enum NotificationTypes {
  POSITIVE,
  NEGATIVE,
  INFO,
}

type NotificationPayload = {
  type: NotificationType;
  message: React.ReactNode;
  autoHideMilliseconds?: number;
};