useNotication

APIs related to message notification can be easily implemented

Examples

Usage

Define the style and logic through two components (content component and container component), and then wrap it with useNotication, it can be used through method calls.

Based on this hook, it is very convenient to use notification.open to call out notifications in the form of message prompts and dialog boxes.

API

Container component

export type NoticationContainerProps = {
  children: ReactNode;
};

export type NoticationContainerType<NCP extends NoticationContainerProps> =
  | ComponentType<NCP>
  | string
  | ExoticComponent;

Container components are used to contain content.

It can be an html element such as div, or it can be React Component or Fragment

Content component

export type NoticationProps = {
  open: boolean;
  onOpenChange: (value: boolean) => void;
  onAfterClosed?: () => void;
};

Content component, with three parameters of open, onOpenChange and onAfterClosed by default

useNotication

export type NoticationHookProps<P extends NoticationProps> = Omit<P, 'open' | 'onOpenChange'>;

export type NoticationHookUpdate<P extends NoticationProps> = (
  props:
    | Partial<NoticationHookProps<P>>
    | ((prev: NoticationHookProps<P>) => Partial<NoticationHookProps<P>>),
) => void;

export type NoticationMethods<P extends NoticationProps> = {
  destroy: () => void;
  update: NoticationHookUpdate<P>;
  isDestroyed: () => boolean;
};

export type NoticationHookReturnType<P extends NoticationProps> = Promise<NoticationMethods<P>> &
  NoticationMethods<P>;

export type NoticationOptions<NCP extends NoticationContainerProps> = Omit<NCP, 'children'> & {
  maxCount?: number;
};

const useNotication = <P extends NoticationProps, NCP extends NoticationContainerProps>(
  Notication: ComponentType<P>,
  NoticationContainer: NoticationContainerType<NCP>,
  options: NoticationOptions<NCP>,
) => [
  {
    open(props: NoticationHookProps<P>): NoticationHookReturnType,
    destroyAll(): void,
  },
  ReactNode,
];