All Projects → t4t5 → Sweetalert

t4t5 / Sweetalert

Licence: mit
A beautiful replacement for JavaScript's "alert"

Programming Languages

javascript
184084 projects - #8 most used programming language
typescript
32286 projects
CSS
56736 projects
HTML
75241 projects

Projects that are alternatives of or similar to Sweetalert

Popupdialog
A simple, customizable popup dialog for iOS written in Swift. Replaces UIAlertController alert style.
Stars: ✭ 3,709 (-83.04%)
Mutual labels:  dialog, modal, alert, popup
react-redux-modal-flex
[DEPRECATED] Make easy a modal/popup with Redux
Stars: ✭ 14 (-99.94%)
Mutual labels:  alert, modal, dialog, popup
Nativepopup
Clone of Apple iOS App's feedback popup, and easily customizable.
Stars: ✭ 247 (-98.87%)
Mutual labels:  dialog, modal, alert, popup
Razor.SweetAlert2
A Razor class library for interacting with SweetAlert2
Stars: ✭ 98 (-99.55%)
Mutual labels:  alert, sweetalert, dialog, popup
Customalertviewdialogue
Custom AlertView Dialogue is the world's most advanced alert view library. Custom AlertView Dialogue includes simple message popups, confirmation alerts, selector popups, action sheet bottom menus, and input/feedback contact forms.
Stars: ✭ 100 (-99.54%)
Mutual labels:  dialog, modal, alert, popup
React Native Alert Pro
The Pro Version of React Native Alert (Android & iOS)
Stars: ✭ 69 (-99.68%)
Mutual labels:  dialog, modal, alert, popup
eins-modal
Simple to use modal / alert / dialog / popup. Created with pure JS. No javascript knowledge required! Works on every browser and device! IE9
Stars: ✭ 30 (-99.86%)
Mutual labels:  alert, modal, dialog, popup
Jbox
jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more.
Stars: ✭ 1,251 (-94.28%)
Mutual labels:  dialog, modal, alert, popup
Sweetalert2
A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies.
Stars: ✭ 13,929 (-36.31%)
Mutual labels:  dialog, alert, popup, sweetalert
Pmalertcontroller
PMAlertController is a great and customizable alert that can substitute UIAlertController
Stars: ✭ 2,397 (-89.04%)
Mutual labels:  dialog, modal, alert, popup
vue-modal
Reusable Modal component, supports own custom HTML, text and classes.
Stars: ✭ 29 (-99.87%)
Mutual labels:  modal, dialog, popup
LSDialogViewController
Custom Dialog for iOS written in Swift
Stars: ✭ 74 (-99.66%)
Mutual labels:  modal, dialog, popup
react-st-modal
Simple and flexible modal dialog component for React JS
Stars: ✭ 41 (-99.81%)
Mutual labels:  alert, modal, dialog
react-spring-bottom-sheet
Accessible ♿️, Delightful ✨, & Fast 🚀
Stars: ✭ 604 (-97.24%)
Mutual labels:  modal, dialog, popup
vue-modal
A customizable, stackable, and lightweight modal component for Vue.
Stars: ✭ 96 (-99.56%)
Mutual labels:  modal, dialog, popup
React Native Simple Dialogs
⚛ Cross-platform React Native dialogs based on the Modal component
Stars: ✭ 218 (-99%)
Mutual labels:  dialog, modal, popup
mac-ibm-notifications
macOS agent used to display custom notifications and alerts to the end user.
Stars: ✭ 206 (-99.06%)
Mutual labels:  alert, dialog, popup
react-native-popup
React Native Animated Popup Modal
Stars: ✭ 19 (-99.91%)
Mutual labels:  alert, modal, popup
plain-modal
The simple library for customizable modal window.
Stars: ✭ 21 (-99.9%)
Mutual labels:  modal, dialog, popup
jquery.dialog.js
A lightweight replacement for the browser's default dialog boxes.
Stars: ✭ 17 (-99.92%)
Mutual labels:  alert, modal, dialog

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

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]

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].