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,
});