APIs related to message notification can be easily implemented
Examples
Basic usage
Basic usage
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,
];