Giter Club home page Giter Club logo

sweetalert's Introduction

SweetAlert

A beautiful replacement for JavaScript's "alert"

npm version Build status

A success modal

Installation

$ npm install --save sweetalert

Usage

import swal from 'sweetalert'

swal("Hello world!")

Upgrading from 1.X

Many improvements and breaking changes have been introduced in the 2.0 release. Make sure you read the upgrade guide to avoid nasty suprises!

Guides

Documentation

Examples

An error message:

swal("Oops!", "Something went wrong!", "error")

A warning message, with a function attached to the confirm message:

  • Using promises:
swal({
  title: "Are you sure?",
  text: "Are you sure that you want to leave this page?",
  icon: "warning",
  dangerMode: true,
})
.then(willDelete => {
  if (willDelete) {
    swal("Deleted!", "Your imaginary file has been deleted!", "success");
  }
});
  • Using async/await:
const willDelete = await swal({
  title: "Are you sure?",
  text: "Are you sure that you want to delete this file?",
  icon: "warning",
  dangerMode: true,
})

if (willDelete) {
  swal("Deleted!", "Your imaginary file has been deleted!", "success");
}

A prompt modal, where the user's input is logged:

  • Using promises:
swal("Type something:", {
  content: "input",
})
.then((value) => {
  swal(`You typed: ${value}`);
})
  • Using async/await:
const value = await swal("Type something:", {
  content: "input",
})

swal(`You typed: ${value}`);

In combination with Fetch:

  • Using promises:
swal({
  text: 'Wanna log some information about Bulbasaur?',
  button: {
    text: "Search!",
    closeModal: false,
  },
})
.then(willSearch => {
  if (willSearch) {
    return fetch(`http://pokeapi.co/api/v2/pokemon/1`)
  }
})
.then(result => result.json())
.then(json => console.log(json))
.catch(err => {
  swal("Oops!", "Seems like we couldn't fetch the info", "error")
})
  • Using async/await:
const willSearch = await swal({
  text: 'Wanna log some information about Bulbasaur?',
  button: {
    text: "Search!",
    closeModal: false,
  },
})

if (willSearch) {
  try {
    const result = await fetch(`http://pokeapi.co/api/v2/pokemon/1`)
    const json = await result.json()
    console.log(json)
  } catch (err) {
    swal("Oops!", "Seems like we couldn't fetch the info", "error")
  }
}

Contributing

If you're changing the core library:

  1. Make changes in the src folder.
  2. Preview changes by running npm run docs
  3. Submit pull request

If you're changing the documentation:

  1. Make changes in the docs-src folder.
  2. Preview changes by running npm run docs
  3. Run npm run builddocs to compile the changes to the docs folder
  4. Submit pull request

sweetalert's People

Contributors

t4t5 avatar lionralfs avatar green-arrow avatar perlmint avatar peterjosling avatar nixta avatar hermanzhu avatar arthurvr avatar connyay avatar sushantdhiman avatar chentsulin avatar lipis avatar holmesal avatar robertonovelo avatar mkoczka avatar 151dd avatar epool avatar krvajal avatar glennvd avatar zzarcon avatar markusboehme avatar mathrobin avatar mwakerman avatar peterkos avatar apzentral avatar eek avatar theodorejb avatar toddwprice avatar tkuijer avatar tomafc330 avatar

Watchers

 avatar  avatar

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.