Collection of components for interaction
📢️ Please check it. Currently, this module supports React 16.8 and later.
- Toast popup
- Notice
- Check
- Tooltip
npm install --save react-interaction
import { toast, notice, check, Tooltip } from 'react-interaction';
toast(message, options)
Name | Type | Default | Description |
---|---|---|---|
time | number | 3000 |
The millisecond time that the message is displayed. |
className | string | ||
style | CSSProperties |
Promise based notice component such as alert
notice(message, options).then(() => console.log('closed'));
Name | Type | Default | Description |
---|---|---|---|
dimmedClassName | string | ||
dimmedStyle | CSSProperties | ||
contentClassName | string | ||
contentStyle | CSSProperties | ||
messageClassName | string | ||
messageStyle | CSSProperties | ||
okClassName | string | ||
okStyle | CSSProperties | ||
okText | string | 'OK' |
Promise based check component such as confirm
check(message, options).then(isConfirmed => console.log(isConfirmed));
Name | Type | Default | Description |
---|---|---|---|
dimmedClassName | string | ||
dimmedStyle | CSSProperties | ||
contentClassName | string | ||
contentStyle | CSSProperties | ||
messageClassName | string | ||
messageStyle | CSSProperties | ||
okClassName | string | ||
okStyle | CSSProperties | ||
okText | string | 'OK' |
|
cancelClassName | string | ||
cancelStyle | CSSProperties | ||
cancelText | string | 'Cancel' |
The position of the tooltip is calculated automatically.
<Tooltip message="Tooltip message">tooltip</Tooltip>
Name | Type | Default | Description |
---|---|---|---|
style | CSSProperties | ||
className | string | ||
message | ReactNode | ||
messageStyle | CSSProperties | ||
messageClassName | string | ||
toggle | boolean | false |
MIT © almond-bongbong