https://github.com/wayou/toos

a simple toast
https://github.com/wayou/toos

component lib react rollup sass toast typescript

Last synced: 7 months ago
JSON representation

a simple toast

• Host: GitHub
• URL: https://github.com/wayou/toos
• Owner: wayou
• License: mit
• Created: 2018-08-31T08:48:14.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-09-15T08:56:22.000Z (about 7 years ago)
• Last Synced: 2025-02-23T18:05:39.503Z (7 months ago)
• Topics: component, lib, react, rollup, sass, toast, typescript
• Language: JavaScript
• Homepage: https://wayou.github.io/toos/
• Size: 1.09 MB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
toos

===

[![CircleCI](https://circleci.com/gh/wayou/toos.svg?style=svg)](https://circleci.com/gh/wayou/toos)

[![MIT LICENSE](https://img.shields.io/github/license/mashape/apistatus.svg)](./LICENSE)

[![npm package](https://img.shields.io/npm/v/toos.svg)](https://www.npmjs.com/package/toos)

[![npm package](https://img.shields.io/npm/dt/toos.svg)](https://www.npmjs.com/package/toos)

A simple toast.

Toos pronouses the same as Chinese word 「吐司」.

### Preview

![toos preview](./assets/preview.gif)

### Installing

Using command line:

```bash

$ yarn add toos

# or

$ npm i -S toos

```

Using CDN:

```html

```

### Usage

```js

import toos from 'toos';

toos.show('Allo!');

toos.show('Allo!', {

    style: 'color:red;'

});

```

### Methods

- `show: (message: string | number, options:  ToastOptions) => void`: show the toast

    - `message`: the message to show

        - type: `string`

        - default: N/A

    - `options`: use the option object to custumize the toast

        - `style`: style for the toast

            - type: `string`

            - default: ` `

        - `class`: class name to customize the style

            - type: `string`

            - default: ` `

        - `duration?: number`: toast duration in ms

            - type: `number`

            - default: `300`

### Examples

See the [stories](https://wayou.github.io/toos/) for examples