Skip to main content

HP TV+ Notification System

HP TV+ have 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 simpliest to most complex:

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

React Context and hooks​

HP TV+ 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 handle the initial state and the possible mutations (addNotification, removeNotification, ...)
  • useNotificationSystem. it expose 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
});