# All files / snackbar ToastManagerProvider.tsx

96.19% Statements 101/105
83.33% Branches 5/6
80% Functions 4/5
96.19% Lines 101/105

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    1061x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    241x
    241x
    1x
    1x
    1x
    1x
    1x
    1x
    19x
    19x
    1x
    1x
    1x
    1x
    1x
    1x

    1x
    1x
    1x
    1x
    1x
    1x
    117x
    117x
    117x
    117x
    117x
    117x
    117x
    117x
    117x
    115x

    115x
    115x
    117x
    117x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    17x
    17x
    17x
    17x
    17x
    17x
     "use client";

    import {
      createContext,
      useContext,
      useMemo,
      useSyncExternalStore,
      type ReactElement,
      type ReactNode,
    } from "react";
    import {
      toastManager,
      type ToastManager,
      type ToastQueue,
    } from "./ToastManager.js";

    const context = createContext(toastManager);
    context.displayName = "ToastManager";
    const { Provider } = context;

    /**
     * This is mostly an internal hook to implement the toast functionality but can
     * be used externally as well for custom toast behavior if the other hooks do
     * not support your needs.
     *
     * @see {@link useAddToast}
     * @see {@link useToastQueue}
     * @see {@link useRemoveToast}
     *
     * @returns The current `ToastManager` set in the `ToastManagerProvider`.
     * Defaults to {@link toastManager} if there are no parent providers.
     * @remarks \@since 6.0.0
     */
    export function useToastManager(): ToastManager {
      return useContext(context);
    }

    /**
     * @see {@link ToastManager.addToast}
     * @remarks \@since 6.0.0
     */
    export function useAddToast(): ToastManager["addToast"] {
      return useToastManager().addToast;
    }

    /**
     * @see {@link ToastManager.removeToast}
     * @remarks \@since 6.0.0
     */
    export function useRemoveToast(): ToastManager["removeToast"] {
      return useToastManager().removeToast;
    }

    /**
     * @param limit - the total number of toasts that can be visible at once.
     * @remarks \@since 6.0.0
     */
    export function useToastQueue(limit?: number): ToastQueue {
      const toastManager = useToastManager();

      const queue = useSyncExternalStore(
        toastManager.subscribe,
        toastManager.getQueue,
        toastManager.getQueue
      );

      return useMemo(() => {
        if (!limit) {
          return queue;
        }

        return queue.slice(0, limit);
      }, [limit, queue]);
    }

    /**
     * @remarks \@since 6.0.0
     */
    export interface ToastManagerProviderProps {
      children: ReactNode;

      /**
       * @defaultValue `toastManager`
       */
      manager?: ToastManager;
    }

    /**
     * **Client Component**
     *
     * This component can be used to implement separate instances of toasts if
     * required in your app. This probably shouldn't be required for most apps with
     * the default {@link addToast}, {@link removeToast}, and {@link clearToasts}
     * implementation.
     *
     * @see {@link ToastManager} for example usage.
     * @remarks \@since 6.0.0
     */
    export function ToastManagerProvider(
      props: ToastManagerProviderProps
    ): ReactElement {
      const { children, manager = toastManager } = props;

      return <Provider value={manager}>{children}</Provider>;
    }