Update documentation for React usage

README.md

@@ -48,6 +48,7 @@ Many improvements and breaking changes have been introduced in the 2.0 release.
 - [Installation](https://sweetalert.js.org/guides/#installation)
 - [Getting started](https://sweetalert.js.org/guides/#getting-started)
 - [Advanced examples](https://sweetalert.js.org/guides/#advanced-examples)
+- [Using with libraries](https://sweetalert.js.org/guides/#using-with-libraries)
 - [Upgrading from 1.X](https://sweetalert.js.org/guides/#upgrading-from-1x)
 
 ## Documentation
@@ -153,6 +154,28 @@ swal("Oops!", "Something went wrong!", "error");
   }
   ```
 
+## Using with React
+
+SweetAlert has tools for [integrating with your favourite rendering library.](https://sweetalert.js.org/guides/#using-with-libraries).
+
+If you're using React, you can install [SweetAlert with React](https://www.npmjs.com/package/@sweetalert/with-react) in addition to the main library, and easily add React components to your alerts like this:
+
+```javascript
+import React from 'react'
+import swal from '@sweetalert/with-react'
+
+swal(
+  <div>
+    <h1>Hello world!</h1>
+    <p>
+      This is now rendered with JSX!
+    </p>
+  </div>
+)
+```
+
+[Read more about integrating with React](http://localhost:3000/guides#using-react)
+
 ## Contributing
 
 ### If you're changing the core library:

docs-src/assets/css/guide.styl

@@ -168,3 +168,36 @@ $side-menu-width = 225px;
 .swal-modal.red-bg {
   background-color: rgba(255, 0, 0, 0.28);
 }
+
+.mood-btn {
+  background: none;
+  border: none;
+  width: 28px;
+  height: 28px;
+  background-image: url(/assets/images/mood-sad.png);
+  background-size: 28px 28px;
+  padding: 4px;
+  background-position: center center;
+  box-sizing: content-box;
+  background-repeat: no-repeat;
+  margin: 0 7px;
+  position: relative;
+  overflow: hidden;
+  border-radius: 3px;
+}
+.mood-btn:hover::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.03);
+}
+.mood-btn[data-rating="2"] {
+  background-image: url(/assets/images/mood-neutral.png);
+}
+.mood-btn[data-rating="3"] {
+  background-image: url(/assets/images/mood-happy.png);
+}
+

docs-src/assets/js/index.js

@@ -12,6 +12,7 @@ import './landing-text-rotater';
  */
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
+import swalWithReact from '@sweetalert/with-react';
 
 const DEFAULT_INPUT_TEXT = "";
 
@@ -69,3 +70,52 @@ window.reactExample = () => {
   });
 
 };
+
+window.withReactExample = () => {
+  swalWithReact(
+    <div>
+      <h1>Hello world!</h1>
+      <p>
+        This is now rendered with JSX!
+      </p>
+    </div>
+  );
+};
+
+window.withReactOptionsExample = () => {
+  const onPick = value => {
+    swal("Thanks for your rating!", `You rated us ${value}/3`, "success")
+  }
+
+  const MoodButton = ({ rating, onClick }) => (
+    <button 
+      data-rating={rating}
+      className="mood-btn" 
+      onClick={() => onClick(rating)}
+    />
+  )
+
+  swalWithReact({
+    text: "How was your experience getting help with this issue?",
+    buttons: {
+      cancel: "Close",
+    },
+    content: (
+      <div>
+        <MoodButton 
+          rating={1} 
+          onClick={onPick}
+        />
+        <MoodButton 
+          rating={2} 
+          onClick={onPick}
+        />
+        <MoodButton 
+          rating={3} 
+          onClick={onPick}
+        />
+      </div>
+    )
+  })
+};
+

docs-src/guides/index.md

@@ -335,6 +335,76 @@ The only code that's specific to SweetAlert is the `swal.setActionValue()` and t
 </figure>
 
 
+# Using with libraries
+
+While the method documented above for creating more advanced modal designs works, it gets quite tedious to manually create nested DOM nodes. That's why we've also made it easy to integrate your favourite template library into SweetAlert, using the [SweetAlert Transformer](https://github.com/sweetalert/transformer).
+
+## Using React
+
+In order to use SweetAlert with JSX syntax, you need to install [SweetAlert with React](https://www.npmjs.com/package/@sweetalert/with-react). Note that you need to have both `sweetalert` and `@sweetalert/with-react` as dependencies in your `package.json`.
+
+After that, it's easy. Whenever you want to use JSX in your SweetAlert modal, simply import swal from `@sweetalert/with-react` instead of from `sweetalert`.
+
+```js
+import React from 'react'
+import swal from '@sweetalert/with-react'
+
+swal(
+  <div>
+    <h1>Hello world!</h1>
+    <p>
+      This is now rendered with JSX!
+    </p>
+  </div>
+)
+```
+<preview-button data-function="withReactExample"></preview-button>
+
+The JSX syntax replaces the modal's `content` option, so you can still use all of SweetAlert's other features. Here's how you could implement that Facebook modal that we saw earlier:
+
+```js
+import React from 'react'
+import swal from '@sweetalert/with-react'
+
+const onPick = value => {
+  swal("Thanks for your rating!", `You rated us ${value}/3`, "success")
+}
+
+const MoodButton = ({ rating, onClick }) => (
+  <button 
+    data-rating={rating}
+    className="mood-btn" 
+    onClick={() => onClick(rating)}
+  />
+)
+
+swal({
+  text: "How was your experience getting help with this issue?",
+  buttons: {
+    cancel: "Close",
+  },
+  content: (
+    <div>
+      <MoodButton 
+        rating={1} 
+        onClick={onPick}
+      />
+      <MoodButton 
+        rating={2} 
+        onClick={onPick}
+      />
+      <MoodButton 
+        rating={3} 
+        onClick={onPick}
+      />
+    </div>
+  )
+})
+```
+
+<preview-button data-function="withReactOptionsExample"></preview-button>
+
+
 # Upgrading from 1.X
 
 SweetAlert 2.0 introduces some important breaking changes in order to make the library easier to use and more flexible.

docs-src/layout-guides.hbs

@@ -21,6 +21,10 @@ layout: default
       Advanced examples
     </a>
 
+    <a href="#using-with-libraries">
+      Using with libraries
+    </a>
+
     <a href="#upgrading-from-1x">
       Upgrading from 1.X
     </a>

docs/assets/css/app.css

@@ -723,6 +723,37 @@ ul {
 .swal-modal.red-bg {
   background-color: rgba(255,0,0,0.28);
 }
+.mood-btn {
+  background: none;
+  border: none;
+  width: 28px;
+  height: 28px;
+  background-image: url("/assets/images/mood-sad.png");
+  background-size: 28px 28px;
+  padding: 4px;
+  background-position: center center;
+  box-sizing: content-box;
+  background-repeat: no-repeat;
+  margin: 0 7px;
+  position: relative;
+  overflow: hidden;
+  border-radius: 3px;
+}
+.mood-btn:hover::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0,0,0,0.03);
+}
+.mood-btn[data-rating="2"] {
+  background-image: url("/assets/images/mood-neutral.png");
+}
+.mood-btn[data-rating="3"] {
+  background-image: url("/assets/images/mood-happy.png");
+}
 body {
   font-family: 'Lato', 'Helvetica Neue', Helvetica, sans-serif;
 }

docs/assets/css/guide.css

@@ -232,3 +232,34 @@
 .swal-modal.red-bg {
   background-color: rgba(255,0,0,0.28);
 }
+.mood-btn {
+  background: none;
+  border: none;
+  width: 28px;
+  height: 28px;
+  background-image: url("/assets/images/mood-sad.png");
+  background-size: 28px 28px;
+  padding: 4px;
+  background-position: center center;
+  box-sizing: content-box;
+  background-repeat: no-repeat;
+  margin: 0 7px;
+  position: relative;
+  overflow: hidden;
+  border-radius: 3px;
+}
+.mood-btn:hover::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0,0,0,0.03);
+}
+.mood-btn[data-rating="2"] {
+  background-image: url("/assets/images/mood-neutral.png");
+}
+.mood-btn[data-rating="3"] {
+  background-image: url("/assets/images/mood-happy.png");
+}