Message

Messages display brief messages for the user without interrupting their use of the app.

Basic Usage

four intents:


import Spross from 'spross';

() => { Spross.Message.info('This is a info message.') }
() => { Spross.Message.success('This is a success message.') }
() => { Spross.Message.warning('This is a warning message.') }
() => { Spross.Message.danger('This is a danger message.') }

Collapsible

collapse messages by setting the collapsible property to true once. After that, all the messages will be collapsed.


import Spross from 'spross';

() => {
  Spross.Message.warning({
    content: 'This is a warning message.',
    collapsible: true,
  });
}

() => {
  Spross.Message.info({
    content: 'This is a info message.',
    collapsible: false,
  });
}

Same Collapsible

set the sameCollapsible property to true to collapse all the messages with the same intent.


import Spross from 'spross';

() => {
  Spross.Message.info({
    content: 'This is a info message.',
    sameCollapsible: true,
    duration: 5,
    closable: true,
  });
}

API

Props	Description	Type	Default
collapsible	Whether collapsible	boolean	false
sameCollapsible	Whether collapsible if all messages with the same intent	boolean	false
duration	The duration of the message, unit: second	number	3
getContainer	The container of the message	() => HTMLElement	() => document.body
intent	The intent of the message	info \| success \| warning \| danger	info
onClose	The callback when the message is closed	() => void	undefined
onMouseEnter	The callback when the mouse enters the message	() => void	undefined
onMouseLeave	The callback when the mouse leaves the message	() => void	undefined