native-toast

Native-like toast notification but for the web. (JS + CSS ≈ 4KB)

Install

$ npm install --save native-toast

NPMCDN: https://unpkg.com/native-toast/dist/

Usage

First import native-toast/dist/native-toast.css, then:

import nativeToast from 'native-toast'
 
nativeToast({
  message: 'wait wait!',
  position: 'north-east',
  // Self destroy in 5 seconds
  timeout: 5000,
  type: 'warning'
})
// or nativeToast.warning(options)

Four types: success warning info error

API

nativeToast(options)

options

message

Type: string
Default: ''

Toast message.

position

Type: string
Default: south-east
Values: center west east south south-west south-east north north-west north-east

Toast position.

rounded

Type: boolean
Default: false

Set border-radius to 33px instead of 3px. Has no effect when edge === false.

timeout

Type: number
Default: 3000

Self destroy in specfic timeout. If given 0 or `false then toast will never self destroy.

type

Type: string
Default: undefined

One of success warning info error.

A short-hand usage: nativeToast.success(opts) nativeToast.error(opts) and such.

icon

Type: boolean
Default: true

Set to false to disable icon.

edge

Type: boolean
Default: false

Show toast on the edge.

closeOnClick

Type: boolean
Default: false

Close the toast when clicked.

elements

Type: HTMLElement[]

Optionally provide an array of HTML elements to insert after the message.

License

MIT © EGOIST