├── .gitignore
├── README.md
├── package.json
├── rollup.config.js
└── src
    └── sweetalert.js


/.gitignore:
--------------------------------------------------------------------------------
1 | dist
2 | node_modules
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # SweetAlert for React
 2 | 
 3 | Easily render React components within your [SweetAlert](https://github.com/t4t5/sweetalert) modals.
 4 | 
 5 | ## Why?
 6 | 
 7 | Many other framework-specific versions of SweetAlert shy away from its JavaScript-based API and abstract it into a template-based system. 
 8 | This one instead embraces it (because JavaScript is awesome!) and lets you pass in components as options!
 9 | 
10 | This lets you continue to use features like Promises, but makes building advanced modal UIs much simpler.
11 | 
12 | ## Install
13 | 
14 | ```bash
15 | npm install @sweetalert/with-react
16 | ```
17 | 
18 | ## Usage
19 | 
20 | When passing JSX as the only parameter, it will replace SweetAlert's `content` option.
21 | 
22 | ```javascript
23 | import React from 'react';
24 | import swal from '@sweetalert/with-react';
25 | 
26 | class App extends React.Component {
27 |   componentDidMount() {
28 |     swal(
29 |       <div>
30 |         <h1>Hello!</h1>        
31 |         <p>I am a React component inside a SweetAlert modal.</p>
32 |       </div>
33 |     )
34 |   }
35 | }
36 | ```
37 | 
38 | <p align="center">
39 |   <img src="https://user-images.githubusercontent.com/2598660/31619494-f68a91f8-b294-11e7-9561-b4f6b1abd724.png" width="600" />
40 | </p>
41 | 
42 | You can also explicitly set the `content` option, if you want to set other [options](https://sweetalert.js.org/docs/#configuration) as well:
43 | 
44 | ```javascript
45 | swal({
46 |   content: <div>Hello world!</div>,
47 |   buttons: true,
48 | });
49 | ```
50 | 
51 | Or use a combination of both:
52 | 
53 | ```javascript
54 | swal(<div>Hello world</div>, {
55 |   buttons: true, 
56 | });
57 | ```
58 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@sweetalert/with-react",
 3 |   "version": "0.1.1",
 4 |   "description": "Official SweetAlert plugin for React",
 5 |   "main": "dist/sweetalert.js",
 6 |   "scripts": {
 7 |     "build": "node_modules/.bin/rollup -c",
 8 |     "prepare": "npm run build"
 9 |   },
10 |   "author": "Tristan Edwards <tristan.edwards@me.com> (https://tristanedwards.me)",
11 |   "license": "MIT",
12 |   "dependencies": {
13 |     "@sweetalert/transformer": "^0.1.1"
14 |   },
15 |   "peerDependencies": {
16 |     "react": "^16.x.x",
17 |     "react-dom": "^16.x.x"
18 |   },
19 |   "devDependencies": {
20 |     "rollup": "0.50.0",
21 |     "react": "^16.x.x",
22 |     "react-dom": "^16.x.x"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   input: 'src/sweetalert.js',
3 |   output: {
4 |     file: 'dist/sweetalert.js',
5 |     format: 'cjs',
6 |   },
7 | };
8 | 


--------------------------------------------------------------------------------
/src/sweetalert.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | 
 4 | import transformer, { bindActions } from '@sweetalert/transformer';
 5 | 
 6 | /*
 7 |  * Convert <Element /> to pure DOM node using ReactDOM
 8 |  * (remember that ReactDOM.render() is async!)
 9 |  */
10 | const getDOMNodeFromJSX = (Element) => {
11 |   const wrapper = document.createElement('div');
12 | 
13 |   return new Promise((resolve) => {
14 |     ReactDOM.render(Element, wrapper, () => {
15 |       const el = wrapper.firstChild;
16 | 
17 |       return resolve(el);
18 |     });
19 |   });
20 | };
21 | 
22 | const swal = (...params) => (
23 |   transformer(params, {
24 |     identifier: React.isValidElement,
25 |     transformer: getDOMNodeFromJSX, 
26 |   })
27 | );
28 | 
29 | bindActions(swal);
30 | 
31 | export default swal;
32 | 
33 | 


--------------------------------------------------------------------------------