sweetalert-react

Declarative SweetAlert in React

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
sweetalert-react
241200.4.115 years ago7 years agoMinified + gzip package size for sweetalert-react in KB

Readme

sweetalert-react
!NPM versionnpm-imagenpm-url !Dependency Statusdavidimgdavidsite
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, nodemodules(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