Skip to main content

Assemble Web Notification System

Assemble Web has a Notification system defined with a set of components (SnackBar, NotificationStack, NotificationManager) and a Context and Hook (NotificationSystemContext, useNotificationSystem).

Components​

The components are divided from simplest to most complex:

  1. SnackBar. Base component from the Component library, it handles the visual definition of each Notification item.
  2. NotificationStack. Complex component, it handles the notification stack, visual effect for individual items and the removal of such.
  3. NotificationManager. Complex component, it handles different notification types if needed.

React Context and hooks​

Assemble Web also includes a React Context for the Notification actions and state, and a hook to make use of such context from the views and components.

  • NotificationSystemContext. it handles the initial state and the possible mutations (addNotification, removeNotification, …)
  • useNotificationSystem. it exposes the actions to the Application views and components.

Application usage​

Add a notification that will auto-hide​

import useNotificationSystem from '@/hooks/useNotificationSystem';
// […]
const { addNotification } = useNotificationSystem();
// […]
addNotification({
  title: 'Your title',
  description: 'Your Description',
  type: 'success', // 'neutral' | 'success' | 'error' | 'warning';
});

Add a notification that will not auto-hide​

import useNotificationSystem from '@/hooks/useNotificationSystem';
// […]
const { addNotification } = useNotificationSystem();
// […]
addNotification({
  title: 'Your title',
  description: 'Your Description',
  type: 'warning', // 'neutral' | 'success' | 'error' | 'warning';
  timer: 0, // Do no hide/remove automatically
});