# @synerise/ds-message

> Message UI Component for the Synerise Design System

Latest version **1.0.5** (published 2025-12-15) · ISC license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @synerise/ds-message
pnpm add @synerise/ds-message
yarn add @synerise/ds-message
bun add @synerise/ds-message
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2025-12-15 |
| First published | 2019-10-31 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 16.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | synerise |

## Links

- npm: https://www.npmjs.com/package/@synerise/ds-message
- Repository: Synerise/synerise-design
- npm.io page: https://npm.io/package/@synerise/ds-message

## Recent versions

- 1.0.5 (latest) — 2025-12-15
- 1.0.4 — 2025-09-16
- 1.0.3 — 2025-07-01
- 1.0.2 — 2025-05-07
- 1.0.1 — 2025-04-04
- 1.0.0 — 2025-03-17
- 0.6.1 — 2025-03-10
- 0.6.0 — 2025-01-29
- 0.5.12 — 2024-09-26
- 0.5.11 — 2024-07-05
- 0.5.10 — 2023-12-11
- 0.5.9 — 2023-10-11
- 0.5.8 — 2023-09-05
- 0.5.7 — 2022-08-12
- 0.5.6 — 2022-08-11
- … 29 more at https://npm.io/package/@synerise/ds-message/versions

## README

---
id: message
title: Message
---

Message UI Component.
Display global messages as feedback in response to user operations.

## Installation

```
npm i @synerise/ds-message
or
yarn add @synerise/ds-message
```

## Usage

```
import message from '@synerise/ds-message'

message.success('It works!');

```

## Demo

<iframe src="/storybook-static/iframe.html?id=components-message--default"></iframe>

## When To Use

- To provide feedback such as success, warning, error etc.
- A message is displayed at top and center and will be dismissed automatically, as a non-interrupting light-weighted prompt.

## API

This components provides some static methods, with usage and arguments as following:

- `message.success(content, [duration], onClose)`
- `message.error(content, [duration], onClose)`
- `message.info(content, [duration], onClose)`
- `message.warning(content, [duration], onClose)`
- `message.warn(content, [duration], onClose)` // alias of warning
- `message.loading(content, [duration], onClose)`

| Argument | Description                                                       | Type                      | Default |
| -------- | ----------------------------------------------------------------- | ------------------------- | ------- |
| content  | content of the message                                            | string \ React. ReactNode | -       |
| duration | time(seconds) before auto-dismiss, don't dismiss if set to 0      | number                    | 1.5     |
| onClose  | Specify a function that will be called when the message is closed | () => void                | -       |

`afterClose` can be called in thenable interface:

- `message[level](content, [duration]).then(afterClose)`
- `message[level](content, [duration], onClose).then(afterClose)`

where `level` refers one static methods of `message`. The result of `then` method will be a Promise.

Supports passing parameters wrapped in an object:

- `message.open(config)`
- `message.success(config)`
- `message.error(config)`
- `message.info(config)`
- `message.warning(config)`
- `message.warn(config)` // alias of warning
- `message.loading(config)`

The properties of config are as follows:

| Property | Description                                                       | Type            | Default |
| -------- | ----------------------------------------------------------------- | --------------- | ------- |
| content  | content of the message                                            | React.ReactNode | -       |
| duration | time(seconds) before auto-dismiss, don't dismiss if set to 0      | number          | 3       |
| onClose  | Specify a function that will be called when the message is closed | function        | -       |
| icon     | Customized Icon                                                   | React.ReactNode | -       |
| key      | The unique identifier of the Message                              | string / number | -       |

### Global static methods

Methods for global configuration and destruction are also provided:

- `message.config(options)`
- `message.destroy()`

#### message.config

```js
message.config({
  top: 100,
  duration: 2,
  maxCount: 3,
});
```

| Argument     | Description                                   | Type              | Default             |
| ------------ | --------------------------------------------- | ----------------- | ------------------- |
| duration     | time before auto-dismiss, in seconds          | number            | 1.5                 |
| getContainer | Return the mount node for Message             | () => HTMLElement | () => document.body |
| maxCount     | max message show, drop oldest if exceed limit | number            | -                   |
| top          | distance from top                             | number            | 24                  |

---
_Source: https://npm.io/package/@synerise/ds-message · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._