React Notifications

The @codedazur/react-notifications package provides a context and hook that can be used to manage snackbars and other notifications from anywhere in your application.

function Example() {
  const { add } = useNotifications("snackbars");

  return (
    <Button onClick={() => add(faker.lorem.sentence())}>
      Add Snackbar
    </Button>
  );

}

Integration Guide

There are two ways to integrate the @codedazur/react-notifications package into your application.

App Component

If you wrap your application in the App component, you will automatically get a NotificationsProvider as well as a snackbar renderer, and you’re ready to use the useNotifications hook.

Manual Integration

If you don’t want to use the App component, or if you want more control over the layout, you can manually wrap your application in a NotificationsProvider.

app/layout.tsx


import { NotificationsProvider } from "@codedazur/react-notifications";
import { ReactNode } from "react";
import { Snackbars } from "../components/Snackbars";
import { myTheme } from "../themes/myTheme";
 
export default function RootLayout(props: { children: ReactNode }) {
  return (
    <html lang="en">
      <body className={myTheme}>
        <NotificationsProvider>
          {props.children}
          <Snackbars />
        </NotificationsProvider>
      </body>
    </html>
  );
}

You will also need to create and render a component to fetch the notifications from the context and render them, for example by using a Column inside a Popover. If you rely on Fusion components for the layout, do make sure to provide the necessary CSS variables.

components/Snackbars.tsx


import { Column, Popover } from "@codedazur/fusion-ui";
import { useNotifications } from "@codedazur/react-notifications";
 
function Snackbars() {
  const { entries } = useNotifications("snackbars");
 
  return (
    <Popover open>
      <Column gap={400}>{entries.map(...)}</Column>
    </Popover>
  );
}

Common Use Cases

Below are some common use cases for the @codedazur/react-notifications package.

Note

To learn more about the @codedazur/react-notifications package, see the package README .

Adding Notifications

You can use the add function returned by the useNotifications hook to add a notification to the context. The function accepts a ReactNode as the first argument, and an optional object of NotificationOptions as the second argument.

function Example() {
  const { add } = useNotifications("snackbars");

  return (
    <Button onClick={() => add(faker.lorem.sentence())}>
      Add Snackbar
    </Button>
  );

}

Auto-Dismissal

By default, snackbars are automatically dismissed after a certain duration, which is configured in the NotificationsProvider. You can override this behavior on a per-snackbar basis by passing an autoDismiss value (in milliseconds) when calling the add function. Setting it to false disables auto-dismissal for that specific snackbar.

function Example() {
  const { add } = useNotifications("snackbars");

  return (
    <Row gap={400}>
      <Button onClick={() => add(faker.lorem.sentence(), { autoDismiss: 1000 })}>
        Auto-Dismiss After 1s
      </Button>
      <Button onClick={() => add(faker.lorem.sentence(), { autoDismiss: false })}>
        Don't Auto-Dismiss
      </Button>
    </Row>
  );

}

Notification Groups

You can support multiple different groups of notifications in your application by using the useNotifications hook with a group name. Since only the standard snackbars group will be rendered automatically by the App component, you will need to handle rendering any other groups yourself.

/**
   * This component is used to add a toast to the toasts group.
   */
  function AddToastButton() {
    const { add } = useNotifications("toasts");

    return (
      <Button onClick={() => add(randomToast())}>
        Add Toast
      </Button>
    );
  }

  /**
   * This component renders all of the toasts in a popover.
   */
  function Toasts() {
    const { entries } = useNotifications("toasts");

    return (
      <Popover
        open
        padding={400}
        anchor={{
          strategy: "fixed",
          parent: Origin.top,
          child: Origin.top,
        }}
        pointerEvents="none"
      >
        <Column gap={400} align="center">
          {entries.map(({ id, notification: { children } }) => (
            <Box key={id} pointerEvents="auto">
              {children}
            </Box>
          ))}
        </Column>
      </Popover>
    );
  }

  /**
   * This mock function is used to generate a random toast.
   */
  function randomToast() {
    return (
      <Surface
        variant={Math.random() > 0.5 ? "warning" : "success"}
        border={{ width: 100 }}
        padding={400}
      >
        {faker.lorem.sentence()}
      </Surface>
    );
  }

  render(
    <>
      <AddToastButton />
      <Toasts />
    </>
  );

If you like, you can abstract the hook call into a custom hook to avoid having to pass the group name to the hook every time.

hooks/useToasts.ts


import { useNotifications } from "@codedazur/react-notifications";
 
export function useToasts() {
  return useNotifications("toasts");
}