@UiReact

UiReact logo icon

Installation

The Basics

Themes

Colorations

Foundation

Main View

Components

Charts

Dialogs

Framer Animations

EzForms

Forms

Grids

Typography

Tools

Contributing

Feature request

UiNotifications


Package: @uireact/notifications

v0.10.23
‼️ Beta

Used to render notifications on the top right corner of the screen, in small breakpoints the notifications appear at the bottom of the screen.

#

Installation ⚙️

1. Make sure you install peer dependencies first:

Expand peer dependencies

2. Install package:

npm i -S @uireact/notifications


#

How to use?

  1. Render the component <UiNotifications /> inside your ViewWrapper as a children of <UiView />. There should ONLY be 1 UiNotifications of this in the React tree.
  2. Use the hook useNotifications() to retrieve the function showNotification() which allows you to add the notification content.
  3. Once the notification is shown, the timeout will start running and will automatically close the notification after 5 secs.

In your ViewWrapper rendering the <UiView /> as a child render the notifications component:

import { UiNotifications } from '@uireact/notifications';

const ViewWrapper = ({ children }) => {
  return (
    <UiView>
      <UiNotifications />
      {children}
    </UiView>
  )
};

#

useNotifications hook

The useNotifications hook gives 2 values:

  1. notifications - UiNotifications[]
  2. showNotification - (notification: UiNotification) => void;

#

UiNotification datatype

The UiNotification type has this structure:

type UiNotificationLink = {
  label: string;
  url: string;
  target?: string;
};

type UiNotification = {
  icon?: string;
  title?: string;
  message?: string;
  link?: UiNotificationLink;
  options?: UiNotificationOptions;
};

type UiNotificationOptions = {
  category?: ColorCategory;
  timer?: number;
  closeButton?: boolean;
};

Make sure you look at the UiIcons doc to check the available icons.

#

UiNotificationOptions

  • category The notification's theme color. Default is primary.
  • timer The time that it will take for the notification to be automatically removed. If is 0 then it won't be removed automatically. Default is 5000 ms.
  • closeButton If the close button should render. Default is true.

#

Example

The notifications provider is set up automatically by the UiView so make sure you are using a UiView component to wrap your application.

import { useNotifications } from '@uireact/notifications';

export const NotificationsExample: React.FC = () => {
  const { showNotification } = useNotifications();

  const addNotification = useCallback(() => {
    showNotification({
      icon: 'Check',
      title: 'New notification',
      message: 'This is a new notification',
    });
  }, [showNotification]);

  const addLinkNotification = useCallback(() => {
    showNotification({
      icon: 'Link',
      title: 'Notification with link',
      message: 'This is a new notification that shows a link',
      link: {
        label: 'Ui React docs',
        url: 'https://uireact.io',
      },
    });
  }, [showNotification]);

  return (
    <>
      <UiNotifications />
      <UiFlexGrid columnGap="four">
        <UiButton onClick={addNotification} category="positive">
          <UiSpacing padding={buttonContentPadding}>
            <UiText>Add notification</UiText>
          </UiSpacing>
        </UiButton>
        <UiButton onClick={addLinkNotification} category="tertiary">
          <UiSpacing padding={buttonContentPadding}>
            <UiText>Add a notification with link</UiText>
          </UiSpacing>
        </UiButton>
      </UiFlexGrid>
    </>
  );
};

#

Wrapper spacing

The UiNotifications component has a prop to customize the spacing on the top wrapper:

For instance if you want the notifications to render just below your header and your header is 100px tall then you can do this:

import { UiNotifications } from '@uireact/notifications';

const ViewWrapper = ({ children }) => {
  return (
    <UiView>
      <UiNotifications topSpacing="100px" />
      { children }
    </UiView>
  )
}

You could also use the className prop although you need to check for the breakpoint as the notifications changes position to the bottom when the breakpoint is small. We already take care of this in the topSpacing prop.