sweetalert2-react

Declarative SweetAlert in React

Introduction

This is a React SweetAlert wrapper for https://github.com/limonte/sweetalert2

Install

$ npm install sweetalert2-react

Usage

import React, { Component } from 'react';
import SweetAlert from 'sweetalert2-react';

// ...

render() {
  return (
    <div>
      <button onClick={() => this.setState({ show: true })}>Alert</button>
      <SweetAlert
        show={this.state.show}
        title="Demo"
        text="SweetAlert in React"
        onConfirm={() => this.setState({ show: false })}
      />
    </div>
  );
}

Since 0.6, you can wrap your own sweetalert2 (swal) instance:

import React, { Component } from 'react';
import { withSwalInstance } from 'sweetalert2-react';
import swal from 'sweetalert2';

const SweetAlert = withSwalInstance(swal);

// ...

render() {
  return (
    <div>
      <button onClick={() => this.setState({ show: true })}>Alert</button>
      <SweetAlert
        show={this.state.show}
        title="Demo"
        text="SweetAlert in React"
        onConfirm={() => this.setState({ show: false })}
      />
    </div>
  );
}

Tests

Tests were not updated to support sweetalert2. PRs are welcome.

License

MIT © C.T. Lin

0.8.0 / 2019-03-09

• [deps] update dependencies
• [fix] support latest sweetalert2

0.4.10 / 2017-04-24

• [deps] Removes prototype reference which raises warnings in react 15.5 #71.

0.4.9 / 2017-02-13

• [fix] clicked comfirm button with empty string should trigger onConfirm instead of onCancel. #56.

0.4.8 / 2017-02-05

• [fix] umd build

0.4.7 / 2017-01-19

• [fix] allow animation prop with pop, slide-from-top, slide-from-bottom value. #50.

0.4.6 / 2016-12-05

• [fix] Don't break server rendering #44.

0.4.5 / 2016-11-09

• [deps] update dependencies
• [fix] Added inputValue to ALLOWS_KEYS #33.