Giter Club home page Giter Club logo

native-toast's Introduction

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.