@bolttech/atoms-notification

Notification

Summary

The Notification component is used to display notifications, either System level with toast like notifications with timer, or displaying notifications as block components. This component has some basic interactions between props that should be known, they are:

• Duration: Allowed values are integers between 3 and 10, those values are in seconds. You can also use 0 as a value, and when it's provided, the notification will not disapear until the user clicks on the close icon.

• onClose: If you use the component as a Block component, you should pass a onClose prop and deal with the visibility conditions on your side using the NotificationProps type. If you use it as a Toast, you should not pass the onClose prop and use the type NotifyProps.

Requirements

• Node 16

Installation

Install the Notification package on your project, with the following command:

npm i @bolttech/atoms-notification@version

How to use

There are 2 ways of using the Notification component. One is displaying it as a toast on the middle top of your application and as a block component.

1. useNotification hook (Toast)

To display a notification as a Toast you should use the useNotification hook. You should configure it as shown bellow:

// app.tsx or any other file you declare your providers

import { NotificationProvider } from '@bolttech/atoms-notification';

export function App(props) {
  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <NotificationProvider translateY={'80px'}>{props.children}</NotificationProvider>
    </BolttechThemeProvider>
  );
}

// any file that should send a notification

import { useNotification, NotifyProps } from '@bolttech/atoms-notification';

const Example = ({ id, dataTestId, variant, duration, icon, text, fullWidth }: NotifyProps) => {
  const { notify } = useNotification();

  return (
    <Button
      size="sm"
      variant="brand"
      title="Click here to notify!"
      onClick={() =>
        notify({
          id: `${id}-${Math.random() * 1234}`,
          dataTestId: dataTestId,
          variant: variant,
          duration: duration,
          icon: icon,
          text: text,
          fullWidth: fullWidth,
        })
      }
    />
  );
};

You can pass a prop called translateY that is a string to the provider, as it is a fixed component, so it will display on top of your application. If you wish to translate it to be below your Header for an example, you can pass the height of your header to that prop and it will appear bellow it.

IMPORTANT: Please be sure that you are using a different Id for each notification, as it's the property that is used to identify which notification should be removed from the list when timer run out.

2. Component (Block)

If you want to display just the Notification as a block component to benefit of it's design, but without any other feature, you can use it the same way as using a normal component.

import { Notification, NotificationProps } from '@bolttech/atoms-notification';

const Example = ({ id, dataTestId, variant, duration, icon, text, fullWidth, onClose }: NotificationProps) => {
  return <Notification id={id} dataTestId={dataTestId} variant={variant} duration={duration} icon={icon} text={text} fullWidth={fullWidth} onClose={onClose} />;
};