https://github.com/daief/axew-toast
A light-weight toast component. / 一个轻量、无依赖的 toast 组件。
https://github.com/daief/axew-toast
toast typescript
Last synced: over 1 year ago
JSON representation
A light-weight toast component. / 一个轻量、无依赖的 toast 组件。
- Host: GitHub
- URL: https://github.com/daief/axew-toast
- Owner: daief
- Created: 2019-08-16T06:30:43.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-07-12T22:59:05.000Z (almost 3 years ago)
- Last Synced: 2025-02-24T07:39:56.994Z (over 1 year ago)
- Topics: toast, typescript
- Language: TypeScript
- Homepage: https://daief.tech/axew-toast/
- Size: 164 KB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# @axew/toast
`@axew/toast` is a toast component.
- light-weight
- promise
- cancelable
- non-dependence
Demo at .
## Usage
Install.
```bash
$ yarn add @axew/toast
# or
$ npm i @axew/toast
```
```js
import toast, { createToast } from '@axew/toast';
toast.show('This a message. It will be hidden in 2.5 seconds.');
toast.show('This a message', 3000);
toast.success('This a message', 3000);
// preset a common config
toast.config({ timeout: 3000 });
toast.show('This message will be hidden in 3 seconds.');
// loading style
toast.loading('Loading...');
// or pass a object option
toast.show({
icon: 'loading',
className: 'my-custom-class',
onClick() {
console.log('clicked');
},
});
// cancelable
const cancel = toast.show(
{
text: 'This a message',
onClose: why => {
console.log(why);
},
},
4000
);
setTimeout(() => {
cancel(); // console.log('cancel');
}, 1000);
// close all toast created by the instance
toast.destroyAll();
// create a new toast instance
const toast2 = createToast();
```
API.
```ts
export declare function createToast(initCfg?: Partial): {
show: IToastFunction;
success: IToastFunction;
error: IToastFunction;
warning: IToastFunction;
loading: IToastFunction;
destroyAll: () => void;
config: (opts: Partial) => void;
};
export declare const toast: {
show: IToastFunction;
success: IToastFunction;
error: IToastFunction;
warning: IToastFunction;
loading: IToastFunction;
destroyAll: () => void;
config: (opts: Partial) => void;
};
export default toast;
```
```ts
export interface IEventHandler {
(this: HTMLDivElement, ev: MouseEvent): void;
options?: boolean | AddEventListenerOptions;
}
export interface IObjectOptions {
/**
* toast message
*
* 文案
*/
text?: string;
/**
* render text as html string
*
* 使用 html 的方式渲染文本
*
* @default false
*/
asHtml?: boolean;
/**
* the icon type or custom icon img url
*
* 定义 icon 类型（或 icon 链接）
*/
icon?: 'success' | 'error' | 'warning' | 'loading' | string;
/**
* @default 36
*/
iconSize?: number | string;
/**
* icon spin
*
* icon 为 loading 时为 true
*/
iconSpin?: boolean;
/**
* toast display time. always display when true
*
* 延迟，true 代表一直存在
*
* @default 2500
*/
timeout?: number | true;
/**
* show modal div
*
* 是否模态
*/
isModal?: boolean;
/**
* css class
*
* 样式名
*/
className?: string;
/**
* click hadnler
*
* 点击事件
*/
onClick?: IEventHandler;
/**
* toast close event
*
* 关闭事件
*/
onClose?: (why: 'auto' | 'cancel') => void;
}
export type IOptions = IObjectOptions | string;
export interface IToastFunction {
(argOpts: IOptions, timeout?: number): VoidFunction;
}
```