useNotify

Components and an API for pushing user notifications.

Setup

To use notifications, provide the notify context somewhere high your component tree along with the NotificationContainer component.

The root layout component is probably the best place to set up the context.

<script lang="ts">
  import { NotificationContainer, provideNotify } from '@viamrobotics/prime-core';

  import PageRoot from '$lib/layout/page-root.svelte';
  import PageContent from '$lib/layout/page-content.svelte';

  provideNotify();
</script>

<PageRoot>
  <PageContent>
    <slot />
  </PageContent>
  <NotificationContainer />
</PageRoot>

Usage

To send a notification, use the useNotify function:

import { useNotify } from '@viamrobotics/prime-core';

const doSomethingCrazy = () => {
  const notify = useNotify();

  notify.info('Hello, Brooklyn!');
};

There are four different levels of notification, each with a different styling.

import { useNotify } from '@viamrobotics/prime-core';

const doSomethingCrazy = () => {
  const notify = useNotify();

  notify.info('Plain slice please!');
  notify.warn('Hello, Brooklyn!');
  notify.danger("I'm walkin' here!");
  notify.success('Fuhgeddaboudit!');
};

import { notify } from '@viamrobotics/prime-core';