0.5.10 • Published 5 months ago

@synerise/ds-message v0.5.10

Weekly downloads
87
License
ISC
Repository
github
Last release
5 months ago

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

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)
ArgumentDescriptionTypeDefault
contentcontent of the messagestring \ React. ReactNode-
durationtime(seconds) before auto-dismiss, don't dismiss if set to 0number1.5
onCloseSpecify 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:

PropertyDescriptionTypeDefault
contentcontent of the messageReact.ReactNode-
durationtime(seconds) before auto-dismiss, don't dismiss if set to 0number3
onCloseSpecify a function that will be called when the message is closedfunction-
iconCustomized IconReact.ReactNode-
keyThe unique identifier of the Messagestring / number-

Global static methods

Methods for global configuration and destruction are also provided:

  • message.config(options)
  • message.destroy()

message.config

message.config({
  top: 100,
  duration: 2,
  maxCount: 3,
});
ArgumentDescriptionTypeDefault
durationtime before auto-dismiss, in secondsnumber1.5
getContainerReturn the mount node for Message() => HTMLElement() => document.body
maxCountmax message show, drop oldest if exceed limitnumber-
topdistance from topnumber24
0.5.10

5 months ago

0.5.8

8 months ago

0.5.9

7 months ago

0.5.7

2 years ago

0.5.6

2 years ago

0.5.5

2 years ago

0.4.9

3 years ago

0.5.0

2 years ago

0.5.2

2 years ago

0.5.1

2 years ago

0.4.8

3 years ago

0.4.7

3 years ago

0.4.6

3 years ago

0.4.5

3 years ago

0.4.3

3 years ago

0.4.1

3 years ago

0.4.0

3 years ago

0.3.11

3 years ago

0.3.10

3 years ago

0.3.9

3 years ago

0.3.8

3 years ago

0.3.7

4 years ago

0.3.6

4 years ago

0.3.5

4 years ago

0.3.4

4 years ago

0.3.3

4 years ago

0.3.2

4 years ago

0.3.1

4 years ago

0.3.0

4 years ago

0.2.1

4 years ago

0.2.0

4 years ago

0.1.1

5 years ago

0.1.0

5 years ago

0.0.1

5 years ago