thiagovice / sweetalert-react

Using sweetalert in React

sweetalert-react

Using sweetalert in React

Introduction

SweetAlert is a wrapped sweetalert implement with React style lifecycle. It have a show prop to determinate that alert should be displayed or not, and onConfirm, onCancel, onClose, onEscapeKey and onOutsideClick props to have more controls on alert element event.

Install

$ npm install sweetalert-react

Usage

import React, { Component } from 'react';
import SweetAlert from 'sweetalert-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>
  );
}

You should import sweetalert.css from cdn, file, node_modules(sweetalert/dist/sweetalert.css) or wherever can find the css code.

Checkout full examples here.

Removed Options

• timer: You should use setTimeout and pass show as false.
• closeOnConfirm: You should pass show as false via onConfirm.
• closeOnCancel: You should pass show as false via onCancel.
• allowEscapeKey: You should pass show as false via onEscapeKey.
• allowOutsideClick: You should pass show as false via onOutsideClick.

All of other options can be passed as props, see them in Configuare Section in sweetalert document

License

MIT © C.T. Lin