Skip to content
Native-like toast notification but for the web.
HTML JavaScript CSS
Branch: master
Clone or download
Latest commit 609f09c Jul 31, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src fix lint Jul 31, 2018
.editorconfig init May 26, 2016
.gitattributes
.gitignore fix build process Jan 20, 2017
.npmignore init May 26, 2016
LICENSE
README.md update badges Jul 31, 2018
gulpfile.js add autoprefixer Jul 31, 2018
package.json Release v2.0.0 Jul 31, 2018
yarn.lock add autoprefixer Jul 31, 2018

README.md

native-toast NPM version NPM downloads

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

You can’t perform that action at this time.