sweetalert README

The project's README from github.com/t4t5/sweetalert. As one markdown file: README.md.

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 surprises!

Guides

Documentation

Examples

An error message:

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

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

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");
  }
});

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:

swal("Type something:", {
  content: "input",
})
.then((value) => {
  swal(`You typed: ${value}`);
});

const value = await swal("Type something:", {
  content: "input",
});

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

In combination with Fetch:

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");
});

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");
  }
}

Using with React

SweetAlert has tools for integrating with your favourite rendering library..

If you're using React, you can install SweetAlert with React in addition to the main library, and easily add React components to your alerts like this:

import React from 'react'
import swal from '@sweetalert/with-react'

swal(
  <div>
    <h1>Hello world!</h1>
    <p>
      This is now rendered with JSX!
    </p>
  </div>
)

Read more about integrating with React

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

Contributors

This project exists thanks to all the people who contribute. [Contribute].

Backers

Thank you to all our backers! 🙏 [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

sweetalert (t4t5/sweetalert)

Searching Database…

22.3K ·GitHub
Sweetalert
这是干什么的？SweetAlert 是 JavaScript 原生 alert() 的直接替代品，能在网页上弹出漂亮的提示框——错误提示、警告对话框和输入弹窗。
它是一个完整的框架，还是只需引入页面的库？只是一个轻量的前端库，不是框架：在原来用原生 alert 的地方改调 swal() 就行，它还附带与 React 这类渲染库集成的工具。
怎么把它加到我的项目里？先从 npm 安装 sweetalert 包，然后在原来用 alert() 的地方调用 swal()；README 里的 Installation 和 Getting started 指南会带你做出第一个弹窗。
它会拖进一大堆依赖吗？不会——运行时依赖只有 promise-polyfill 和 es6-object-assign，所以它依然很轻量。
我还在用 1 版，能直接升级到 2.0 吗？不能想当然地升：2.0 版本引入了大量不兼容的改动，README 建议先读升级指南，免得踩坑。
它只能在浏览器里跑，还是服务器上也能用？它是一个客户端网页库，替代的是浏览器的 alert 对话框，所以只在网页里运行——没有服务器端或 Node 版本。
它能显示哪些类型的对话框？README 里演示了错误提示、带确认按钮回调函数的警告框，以及能采集用户输入的输入弹窗——还包括配合 Fetch 调用的示例。
用户点确认后，我怎么执行代码？swal() 是基于 Promise 的：你可以用 .then() 或 async/await 来响应用户的选择——README 示例里两种写法都有。
能把我自己写的 React 组件放进弹窗里吗？可以——在主库之外再安装 SweetAlert with React，就能轻松把 React 组件加到弹窗里。
能调整弹窗样式来配合我的网站吗？可以——文档里有专门讲 Configuration、Methods 和 Theming 的章节，外观和行为都可以调。
What are similar projects?sweetalert2, material, styled-components, chakra-ui, bootstrap-table, chosen, material-components-web, Sortable
Which topics is it in?dialog, theme, javascript-library, ui-components, customization, browser, ui, web-development, free, npm, frontend, library
Creator
t4t5
Size
5.3 MB
Stars
22.3K
Updated
CommitMar 13Releasev2.1.0Dec 14
Age
12y
Commits · 90 Days