@sinchsmb/ui-kit/src/core/managers/ToastManager/hooks/useToastManager.ts

UI kit for SinchSMB frontend

import { useToastManagerContext } from '../contexts/ToastManagerContext';
import { ShowToastThroughManagerOptions, WithToastIdProps } from '../types';

/** Result of {@link useToastManager} hook */
export interface UseToastManagerResult {
  /** Show given component as Toast */
  showToast: (
    component: (props: WithToastIdProps) => JSX.Element,
    options?: ShowToastThroughManagerOptions,
  ) => void;
  /** Hide Toast with given ID */
  hideToast: (id: string) => void;
}

/**
 * Returns functions that allow to show any component as Toast.
 *
 * ```tsx
 * import { useToastManager, ToastProps, Toast, ToastAction } from 'ui-kit';
 *
 * function ButtonThatShouldShowToast() {
 *   const { showToast, hideToast } = useToastManager();
 *
 *   const ToastComponent = ({ ToastId }: ToastProps) => {
 *     return (
 *       <Toast onDismiss={() => hideToast(ToastId)}>
 *         Some very important message, that user should to see.
 *         <ToastAction>Hide</ToastAction>
 *       </Toast>
 *     );
 *   };
 *
 *   const show = () => {
 *     showToast(ToastComponent);
 *   };
 *
 *   return <Button onClick={show}>Show Toast</Button>;
 * }
 * ```
 */
export function useToastManager(): UseToastManagerResult {
  const { showToast, hideToast } = useToastManagerContext();

  return {
    showToast,
    hideToast,
  };
}