# @etsoo/notificationbase > TypeScript notification component for extending with all features described and partially implemented Latest version **1.1.75** (published 2026-08-24) · MIT license · 0 weekly downloads ## Install ```sh npm install @etsoo/notificationbase pnpm add @etsoo/notificationbase yarn add @etsoo/notificationbase bun add @etsoo/notificationbase ``` ## Health **Score 75/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 1.1.75 | | Published | 2026-08-24 | | First published | 2020-08-12 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 1 | | Unpacked size | 99.5 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Provenance | attested (GitHub Actions) | | GitHub stars | 1 | | Author | Garry Xiao | | Maintainers | garryxiao | | Keywords | notification, TypeScript, ETSOO, SmartERP, 司友云平台, 青岛亿速思维, 上海亿商 | ## Links - npm: https://www.npmjs.com/package/@etsoo/notificationbase - Repository: https://github.com/ETSOO/NotificationBase - Homepage: https://github.com/ETSOO/NotificationBase#readme - Issues: https://github.com/ETSOO/NotificationBase/issues - npm.io page: https://npm.io/package/@etsoo/notificationbase ## Dependencies (1) - [@etsoo/shared](https://npm.io/package/@etsoo/shared.md) ^1.2.91 ## Alternatives - [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads - [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads - [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads - [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads - [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads ## Recent versions - 1.1.75 (latest) — 2026-08-24 - 1.1.74 — 2026-07-11 - 1.1.73 — 2026-07-11 - 1.1.72 — 2026-06-26 - 1.1.71 — 2026-05-09 - 1.1.70 — 2026-04-18 - 1.1.69 — 2026-04-05 - 1.1.68 — 2026-03-29 - 1.1.67 — 2026-03-14 - 1.1.66 — 2025-11-05 - 1.1.65 — 2025-11-04 - 1.1.64 — 2025-09-16 - 1.1.63 — 2025-06-10 - 1.1.62 — 2025-05-26 - 1.1.61 — 2025-05-09 - … 159 more at https://npm.io/package/@etsoo/notificationbase/versions ## README # NotificationBase **TypeScript notification component for extending with all features described and partially implemented.** ## Installing Using npm: ```bash $ npm install @etsoo/notificationbase ``` Using yarn: ```bash $ yarn add @etsoo/notificationbase ``` ## Notification Notification object to display. INotification is the interface. INotificationBase is for data definition. Properties: | Name | Description | | ----------: | -------------------------------------- | | align | Readonly, display align | | content | Content to display | | id | Unique id | | inputProps | Input or additional control properties | | modal | Display as modal window or not | | onDismiss | Dismiss callback | | onReturn | Return value callback | | open | Is open or not | | ref | Render result reference | | renderSetup | Setup callback before render | | showIcon | Show icon or not | | timespan | Seconds to auto dismiss | | title | Title | | type | Notification type | Methods: ```ts /** * Constructor * @param type Type * @param content Content * @param title Title * @param align Align */ constructor( type: NotificationType, content: NotificationContent, title?: NotificationContent, align?: NotificationAlign ) /** * Dismiss it * @param delaySeconds Delay seconds * @returns Is delayed or not */ dismiss(delaySeconds: number = 0): boolean /** * Dispose it */ dispose() /** * Render method * @param props Props * @param className Style class name * @param options Other options */ render( props: NotificationRenderProps, className?: string, options?: any ): UI | undefined; /** * Return value * Dismiss first, then run callback * @param value * @returns */ returnValue(value: any): Promise; ``` ## NotificationContainer NotificationContainer is to hold all notifications. INotificationContainer is the interface. Properties: | Name | Description | | ------------: | -------------------------------------------- | | notifications | Readonly. Notification collection to display | | isLoading | Is loading bar showing | | isModeling | Is model window showing | Methods: ```ts /** * Add notification * @param notification Notification * @param top Is insert top */ add(notification: INotification, top?: boolean): void; /** * Report error or message * @param errorOrTitle Error message or title * @param callback Callback * @param type Type, default is Error * @param props Props */ alert( error: NotificationContent | [NotificationContent, NotificationContent], callback?: NotificationReturn, type?: NotificationMessageType, props?: C ): INotification; /** * Align all notification count * @param align Align */ alignCount(align: NotificationAlign): number; /** * Align open notification count * @param align Align */ alignOpenCount(align: NotificationAlign): number; /** * Remove all closed notification */ clear(): void; /** * Confirm action * @param message Message * @param title Title * @param callback Callback * @param props Props */ confirm( message: NotificationContent, title?: NotificationContent, callback?: NotificationReturn, props?: C ): INotification; /** * Dispose all notifications */ dispose(): void; /** * Get notification with align and id * @param align Align * @param id Notification id */ get(align: NotificationAlign, id: string): INotification | undefined; /** * Get notification with id * @param id Notification id */ getById(id: string): INotification | undefined; /** * Hide loading * @param force Force to hide, otherwise, only the last one */ hideLoading(force?: boolean): void; /** * Show a message * @param type Message type * @param message Message * @param title Title * @param parameters Parameters * @param props Props */ message( type: NotificationMessageType, message: NotificationContent, title?: NotificationContent, parameters?: NotificationParameters, props?: C ): INotification; /** * Popup component as modal * @param component Component to popup * @param anchor Position anchor * @returns Result */ popup( component: NotificationContent, anchor?: HTMLElement | string | { left: number; top: number } ): INotification; /** * Prompt action * @param message Message * @param callback Callback * @param title Title * @param props More properties */ prompt( message: NotificationContent, callback: NotificationReturn, title?: NotificationContent, props?: C ): INotification; /** * Show loading * @param title Title */ showLoading(title?: NotificationContent): void; /** * Show a success message * @param message Message * @param title Title * @param callback Callback * @param timespan Timespan to close * @param props Props */ succeed( message: NotificationContent, title?: NotificationContent, callback?: NotificationReturn, timespan?: number, props?: C ): INotification; ``` --- _Source: https://npm.io/package/@etsoo/notificationbase · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._