Added QRCode to Share modal, to enable easy mobile preview (codesandbox#632)

* Added QR Code to share modal

* Added contributor

* Added yarn.lock

* Added button to show/hide QR Code

* Omitted boolean value in JSX Button

Author: bitblitter

.all-contributorsrc

@@ -487,6 +487,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "bitblitter",
+      "name": "Carles Codony",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/576935?v=4",
+      "profile": "https://github.com/bitblitter",
+      "contributions": [
+        "code"
+      ]
     }
   ]
 }

README.md

@@ -1,4 +1,4 @@
-# [CodeSandbox](https://codesandbox.io) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/KE3TbEZ) [![All Contributors](https://img.shields.io/badge/all_contributors-50-orange.svg?style=flat-square)](#contributors) [![Build Status](https://travis-ci.org/CompuIves/codesandbox-client.svg?branch=master)](https://travis-ci.org/CompuIves/codesandbox-client) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![first-timers-only Friendly](https://img.shields.io/badge/first--timers--only-friendly-blue.svg)](http://www.firsttimersonly.com/)
+# [CodeSandbox](https://codesandbox.io) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/KE3TbEZ) [![All Contributors](https://img.shields.io/badge/all_contributors-51-orange.svg?style=flat-square)](#contributors) [![Build Status](https://travis-ci.org/CompuIves/codesandbox-client.svg?branch=master)](https://travis-ci.org/CompuIves/codesandbox-client) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![first-timers-only Friendly](https://img.shields.io/badge/first--timers--only-friendly-blue.svg)](http://www.firsttimersonly.com/)
 
 An online code editor tailored for web applications.
 
@@ -44,5 +44,5 @@ Thanks goes to these wonderful people
 | [<img src="https://avatars3.githubusercontent.com/u/6270048?v=4" width="100px;"/><br /><sub><b>Haroen Viaene</b></sub>](https://twitter.com/haroenv)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=haroenv "Code") [🎨](#design-haroenv "Design") | [<img src="https://avatars1.githubusercontent.com/u/293805?v=4" width="100px;"/><br /><sub><b>Nick Nisi</b></sub>](https://nicknisi.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=nicknisi "Code") | [<img src="https://avatars2.githubusercontent.com/u/9327315?v=4" width="100px;"/><br /><sub><b>Abhishek Jakhotiya</b></sub>](https://github.com/Jakhotiya)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=Jakhotiya "Code") [🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3AJakhotiya "Bug reports") | [<img src="https://avatars2.githubusercontent.com/u/14299145?v=4" width="100px;"/><br /><sub><b>Tom Kühl</b></sub>](http://twitter.com/tomkuehl_)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=tomkuehl "Code") | [<img src="https://avatars2.githubusercontent.com/u/1086461?v=4" width="100px;"/><br /><sub><b>br1anchen</b></sub>](https://github.com/br1anchen)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=br1anchen "Code") | [<img src="https://avatars3.githubusercontent.com/u/11952174?v=4" width="100px;"/><br /><sub><b>Daniel Hsing</b></sub>](https://arthelon.github.io)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=Arthelon "Code") | [<img src="https://avatars2.githubusercontent.com/u/5403694?v=4" width="100px;"/><br /><sub><b>Maciej Kasprzyk</b></sub>](https://twitter.com/_maciejka)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=maciej-ka "Code") |
 | [<img src="https://avatars2.githubusercontent.com/u/596727?v=4" width="100px;"/><br /><sub><b>Robert Heessels</b></sub>](https://github.com/robertheessels)<br />[📖](https://github.com/CompuIves/codesandbox-client/commits?author=robertheessels "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/772937?v=4" width="100px;"/><br /><sub><b>Ryan P. C. McQuen</b></sub>](https://ryanpcmcquen.org)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=ryanpcmcquen "Code") | [<img src="https://avatars3.githubusercontent.com/u/613805?v=4" width="100px;"/><br /><sub><b>Chris</b></sub>](http://chrisrjones.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=ipatch "Code") | [<img src="https://avatars3.githubusercontent.com/u/595469?v=4" width="100px;"/><br /><sub><b>Drew Smith</b></sub>](https://github.com/drewsmith)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=drewsmith "Code") | [<img src="https://avatars2.githubusercontent.com/u/12481?v=4" width="100px;"/><br /><sub><b>Eric Berry</b></sub>](https://codesponsor.io)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=coderberry "Code") | [<img src="https://avatars1.githubusercontent.com/u/17228477?v=4" width="100px;"/><br /><sub><b>Hum4n01d</b></sub>](https://www.hum4n01d.me)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=Hum4n01d "Code") | [<img src="https://avatars3.githubusercontent.com/u/10888943?v=4" width="100px;"/><br /><sub><b>Malachi Willey</b></sub>](https://github.com/malwilley)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=malwilley "Code") |
 | [<img src="https://avatars0.githubusercontent.com/u/1820292?v=4" width="100px;"/><br /><sub><b>Michel Weststrate</b></sub>](https://twitter.com/mweststrate)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=mweststrate "Code") | [<img src="https://avatars0.githubusercontent.com/u/52824?v=4" width="100px;"/><br /><sub><b>Oleg</b></sub>](https://kof.github.io)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=kof "Code") | [<img src="https://avatars0.githubusercontent.com/u/1127037?v=4" width="100px;"/><br /><sub><b>Paul Sherman</b></sub>](https://www.pshrmn.com)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Apshrmn "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=pshrmn "Code") | [<img src="https://avatars2.githubusercontent.com/u/9244507?v=4" width="100px;"/><br /><sub><b>Ro Savage</b></sub>](https://github.com/ro-savage)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=ro-savage "Code") | [<img src="https://avatars3.githubusercontent.com/u/13242392?v=4" width="100px;"/><br /><sub><b>Sam Denty</b></sub>](https://samdd.me)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=samdenty99 "Code") | [<img src="https://avatars1.githubusercontent.com/u/3087225?v=4" width="100px;"/><br /><sub><b>Zephraph</b></sub>](https://github.com/zephraph)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=zephraph "Code") | [<img src="https://avatars1.githubusercontent.com/u/1900735?v=4" width="100px;"/><br /><sub><b>Josh Waller</b></sub>](https://www.joshwaller.me)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Amdxprograms "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=mdxprograms "Code") [📖](https://github.com/CompuIves/codesandbox-client/commits?author=mdxprograms "Documentation") |
-| [<img src="https://avatars0.githubusercontent.com/u/1195863?v=4" width="100px;"/><br /><sub><b>Joe Ng'ethe</b></sub>](http://joey.co.ke)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=joeynimu "Code") |
+| [<img src="https://avatars0.githubusercontent.com/u/1195863?v=4" width="100px;"/><br /><sub><b>Joe Ng'ethe</b></sub>](http://joey.co.ke)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=joeynimu "Code") | [<img src="https://avatars0.githubusercontent.com/u/576935?v=4" width="100px;"/><br /><sub><b>Carles Codony</b></sub>](https://github.com/bitblitter)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=bitblitter "Code") |
 <!-- ALL-CONTRIBUTORS-LIST:END -->

packages/app/package.json

@@ -156,6 +156,7 @@
     "posthtml": "^0.11.3",
     "posthtml-parser": "^0.4.1",
     "posthtml-render": "^1.1.0",
+    "qrcode.react": "^0.8.0",
     "qs": "^6.5.0",
     "querystring": "^0.2.0",
     "rc-slider": "^8.2.0",

packages/app/src/app/pages/common/Modals/ShareModal/index.js

@@ -3,6 +3,8 @@ import { inject, observer } from 'mobx-react';
 import Files from 'embed/components/Files';
 import ModeIcons from 'app/components/ModeIcons';
 import { getModulePath } from 'common/sandbox/modules';
+import QRCode from 'qrcode.react';
+import Button from 'app/components/Button';
 
 import {
   optionsToParameterizedUrl,
@@ -40,6 +42,7 @@ class ShareView extends React.Component {
     useCodeMirror: false,
     enableEslint: false,
     expandDevTools: false,
+    showQRCode: false,
   };
 
   handleChange = e => this.setState({ message: e.target.value });
@@ -61,6 +64,8 @@ class ShareView extends React.Component {
 
   clearDefaultModule = () => this.setState({ defaultModule: null });
 
+  toggleQRCode = () => this.setState({ showQRCode: !this.state.showQRCode });
+
   getOptionsUrl = () => {
     const sandbox = this.props.store.editor.currentSandbox;
     const mainModule = this.props.store.editor.mainModule;
@@ -159,9 +164,8 @@ class ShareView extends React.Component {
   // eslint-disable-next-line
   getButtonMarkdown = () => {
     const sandbox = this.props.store.editor.currentSandbox;
-    return `[![Edit ${sandbox.title || sandbox.id}](${
-      BUTTON_URL
-    })](${this.getEditorUrl()})`;
+    return `[![Edit ${sandbox.title ||
+      sandbox.id}](${BUTTON_URL})](${this.getEditorUrl()})`;
   };
 
   // eslint-disable-next-line
@@ -214,6 +218,7 @@ class ShareView extends React.Component {
       useCodeMirror,
       enableEslint,
       expandDevTools,
+      showQRCode,
     } = this.state;
 
     const defaultModule = this.state.defaultModule || mainModule.id;
@@ -334,6 +339,27 @@ class ShareView extends React.Component {
                 value={this.getIframeScript()}
                 readOnly
               />
+              <LinkName>QR Code</LinkName>
+              <Inputs>
+                <ButtonContainer>
+                  <Button
+                    onClick={this.toggleQRCode}
+                    small
+                    style={{ width: '100%' }}
+                  >
+                    {showQRCode ? 'Hide' : 'Show'} QR Code
+                  </Button>
+                  {showQRCode && (
+                    <Inputs>
+                      <QRCode
+                        value={this.getEmbedUrl()}
+                        size={'100%'}
+                        renderAs="svg"
+                      />
+                    </Inputs>
+                  )}
+                </ButtonContainer>
+              </Inputs>
             </Inputs>
           </Column>
           <Column>

yarn.lock

@@ -12416,6 +12416,17 @@ q@^1.1.2, q@^1.4.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
 
+[email protected]:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/qr.js/-/qr.js-0.0.0.tgz#cace86386f59a0db8050fa90d9b6b0e88a1e364f"
+
+qrcode.react@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/qrcode.react/-/qrcode.react-0.8.0.tgz#413b31cc3b62910e39513f7bead945e01c4c34fb"
+  dependencies:
+    prop-types "^15.6.0"
+    qr.js "0.0.0"
+
 [email protected], qs@^6.2.1, qs@^6.5.0, qs@~6.5.1:
   version "6.5.1"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.1.tgz#349cdf6eef89ec45c12d7d5eb3fc0c870343a6d8"