sweetalert-react

    0.4.11 • Public • Published

    sweetalert-react

    NPM version Dependency Status

    Declarative SweetAlert in React

    Introduction

    sweetalert-react is a wrapped sweetalert implement with declarative React style component api. There is a show prop on it 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

    FAQ

    Q: My alert didn't close when 'go back' or 'go forward' in browser

    You can listen history change and set show: false when it mounted. See full example here.

    Q: Can I use react component to render html for popup body?

    Sure, you can achieve it with ReactDOMServer.renderToStaticMarkup:

    import { renderToStaticMarkup } from 'react-dom/server';
     
    <SweetAlert
      show={this.state.show}
      title="Demo"
      html
      text={renderToStaticMarkup(<HelloWorld />)}
      onConfirm={() => this.setState({ show: false })}
    />

    See full example here. Thanks @ArkadyB for discovering the approach in issue #53.

    Relevant Projects

    License

    MIT © C.T. Lin

    Install

    npm i sweetalert-react

    DownloadsWeekly Downloads

    8,369

    Version

    0.4.11

    License

    MIT

    Last publish

    Collaborators

    • chentsulin
    • kpman
    • xxhomey19