2.0.2 • Published 2 years ago

sweetalert-with-react v2.0.2

Weekly downloads
-
License
MIT
Repository
-
Last release
2 years ago

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. sweetalert-with-react repository is a direct fork of @sweetalert/with-react that I have modified to work with React 18. The original author, unfortunately, has not gotten back to me on updating the package. I will act as interim/permanent maintainer for the time being. While exploring the code I've also removed unnecessary dependencies. We now use the following dependencies exclusively:

    "react": ">=16",
    "react-dom": ">=16"

And a development dependency for compilation:

    "rollup": "0.50.0"

Feel free to contact me @richardtmiles at my GitHub.

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

2 years ago

2.0.1

2 years ago

2.0.0

2 years ago