@dune2/mantine-notifications
Version:
Mantine notifications system
57 lines (56 loc) • 2.98 kB
TypeScript
import { BoxProps, ElementProps, Factory, PortalProps, StylesApiProps } from '@mantine/core';
import { notifications, NotificationsStore } from './notifications.store';
export type NotificationsStylesNames = 'root' | 'notification';
export type NotificationsCssVariables = {
root: '--notifications-z-index' | '--notifications-top' | '--notifications-right' | '--notifications-left' | '--notifications-left' | '--notifications-transform' | '--notifications-container-width';
};
export interface NotificationsProps extends BoxProps, StylesApiProps<NotificationsFactory>, ElementProps<'div'> {
/** Notifications position, `'bottom-right'` by default */
position?: 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center';
/** Auto close timeout for all notifications in ms, `false` to disable auto close, can be overwritten for individual notifications in `notifications.show` function, `4000` by default */
autoClose?: number | false;
/** Notification transition duration in ms, `250` by default */
transitionDuration?: number;
/** Notification width, cannot exceed 100%, `440` by default */
containerWidth?: number | string;
/** Notification `max-height`, used for transitions, `200` by default */
notificationMaxHeight?: number | string;
/** Maximum number of notifications displayed at a time, other new notifications will be added to queue, `5` by default */
limit?: number;
/** Notifications container z-index, `400` by default */
zIndex?: string | number;
/** Props passed down to the `Portal` component */
portalProps?: Omit<PortalProps, 'children'>;
/** Store for notifications state, can be used to create multiple instances of notifications system in your application */
store?: NotificationsStore;
/** Determines whether notifications container should be rendered inside `Portal`, `true` by default */
withinPortal?: boolean;
}
export type NotificationsFactory = Factory<{
props: NotificationsProps;
ref: HTMLDivElement;
stylesNames: NotificationsStylesNames;
vars: NotificationsCssVariables;
staticComponents: {
show: typeof notifications.show;
hide: typeof notifications.hide;
update: typeof notifications.update;
clean: typeof notifications.clean;
cleanQueue: typeof notifications.cleanQueue;
updateState: typeof notifications.updateState;
};
}>;
export declare const Notifications: import("@mantine/core").MantineComponent<{
props: NotificationsProps;
ref: HTMLDivElement;
stylesNames: NotificationsStylesNames;
vars: NotificationsCssVariables;
staticComponents: {
show: typeof notifications.show;
hide: typeof notifications.hide;
update: typeof notifications.update;
clean: typeof notifications.clean;
cleanQueue: typeof notifications.cleanQueue;
updateState: typeof notifications.updateState;
};
}>;