SweetAlert for React

Easily render React components within your SweetAlert modals.

Why?

Many other framework-specific versions of SweetAlert shy away from its JavaScript-based API and abstract it into a template-based system. This one instead embraces it (because JavaScript is awesome!) and lets you pass in components as options!

This lets you continue to use features like Promises, but makes building advanced modal UIs much simpler.

Install

npm install @sweetalert/with-react

Usage

When passing JSX as the only parameter, it will replace SweetAlert's content option.

import React from 'react';
import swal from '@sweetalert/with-react';
 
class App extends React.Component {
  componentDidMount() {
    swal(
      <div>
        <h1>Hello!</h1>        
        <p>I am a React component inside a SweetAlert modal.</p>
      </div>
    )
  }
}

You can also explicitly set the content option, if you want to set other options as well:

swal({
  content: <div>Hello world!</div>,
  buttons: true,
});

Or use a combination of both:

swal(<div>Hello world</div>, {
  buttons: true, 
});