sweetalert-react

Declarative SweetAlert in React

Introduction

sweetalert-react is a wrapped sweetalert implementation with declarative React style component APIs. There is a show prop available for toggling alert component's visibility. And onConfirm, onCancel, onClose, onEscapeKey, onOutsideClick props allow you have a fine grained control over alert component events.

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 method to include this CSS file.

Checkout the 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 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 to history changes and set show: false when it is mounted. See the full example here.

Q: Can I use react component to render HTML as the alert body?

Sure, you can achieve this 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 the full example here. Thanks @ArkadyB for discovering the approach in issue #53.

Relevant Projects

• react-redux-sweetalert

License

MIT © C.T. Lin