Skip to content
Build and run React Native apps in your browser!
JavaScript CSS Other
Branch: master
Clone or download
Latest commit 36de21c Jun 17, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
components Updated version Jun 17, 2019
constants Fix scaling with bad aspect ratio Dec 12, 2016
dist Updated version Jun 17, 2019
styles Customizable css for player and workspace Dec 27, 2016
utils Update to webpack 2 Dec 28, 2016
webpack Update dist to webpack 2 Dec 28, 2016
.babelrc
.gitignore Update react-native-web to 11.4 Jun 17, 2019
.nojekyll Fix gh-pages ignoring vendor-bundle Nov 24, 2016
.npmignore Add .npmignore so published package includes bundles Aug 17, 2016
LICENSE Version 1.0.0 - BSD License Jun 24, 2016
Makefile Update hosting from npmcdn => maxcdn + rawgit Sep 23, 2016
README.md Updated version Jun 17, 2019
babel-worker.js Transpiled output viewer. Customizable panes. Nov 20, 2016
index.html Improve code quality, design, bundle size (#1) May 31, 2016
index.js Add experimental console pane (#22) Jun 5, 2017
package.json Updated version Jun 17, 2019
player.html Customizable css for player and workspace Dec 27, 2016
player.js Update react-native-web to 11.4 Jun 17, 2019
yarn.lock Fix fullscreen mode Jun 17, 2019

README.md

React Native Web Player

Run react native apps in your browser!

Try it out!

About

This project uses react-native-web to create an environment for learning and experimenting with React Native.

The web player is implemented as an iframe for easy, performant inclusion in any webpage. Transpilation is done in a web worker so the main thread isn't blocked as the page loads.

Usage

The web player may be included in your site either as a React component or directly as an iframe.

As React Component

If you're using React:

npm install --save react-native-web-player

Then:

import WebPlayer from 'react-native-web-player'

export default () => (
  <WebPlayer
    style={{width: 800, height: 500}}
  />
)

This component is a simple wrapper around the iframe that handles encoding parameters for you. While it passes most props along to the iframe, it has a few extra props:

  • style - The style of the div which wraps the iframe (the iframe has 100% width and height).
  • className - The className of the div which wraps the iframe.
  • baseURL - Optionally, specify a custom url to load the player from. This url should not include a hash. Defaults to the //cdn.rawgit.com url as described below.

A umd build of this React component is available in the dist directory.

As iframe

If you're not using React, include the web player in an iframe.

<iframe width="880" height="425" frameborder="0" src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v2.0.0-alpha.4/index.html"></iframe>

Parameters

The React component accepts the following props. Props don't need to be URI-encoded or JSON-encoded, as this is handled automatically.

The iframe accepts the following parameters after the hash in the url. You must URI encode every parameter.

  • code - The code to show/run in the player. Defaults to the sample app.
  • title - An optional title for the player. By default, there is no title.
  • width - The width of the device. Defaults to 210.
  • scale - Zoom the device screen. Defaults to 1.
  • platform - One of ios or android. Defaults to ios. Currently this changes the phone image, but may also have an effect on how the code is executed in the future.
  • entry - The filename of the entry file. This is only relevant when showing multiple files with the files parameter. Defaults to index.js.
  • initialTab - The filename of the tab to show by default. This is only relevant when showing multiple files with the files parameter. Defaults to index.js.
  • fullscreen - Show a button to enable fullscreen editing. Defaults to false. Note that the iframe must have the allowfullscreen attribute for this to work.
  • assetRoot - Specifies the root url for asset requires. E.g. to require http://localhost:8080/images/hello.png, you could set assetRoot to 'http://localhost:8080/' and write require('./images/hello.png') in your code.
  • transpilerTitle - An optional title for the transpiler output pane. By default, there is no title.
  • playerTitle - An optional title for the player pane. By default, there is no title.
  • workspaceCSS - An optional CSS string to apply to the workspace iframe.
  • playerCSS - An optional CSS string to apply to the player's iframe.
  • playerStyleSheet - One of reset or none. When reset, the meyerweb CSS reset is applied to the player's iframe. Defaults to reset.

When using the iframe directly, the following parameters must be JSON encoded and then also URI encoded:

  • files - Array of files to show, one per tab. The format is an array of 2-element arrays, where the first element is the filename (e.g. index.js) and the second is the code.

    Example usage: [['index.js', 'console.log(1)'], ['foo.js', 'console.log(2)']]

    Files may be required from one another by name. E.g. if the files are index.js and helpers.js, in the code of index.js you may write import Foo from './helpers' to use its default export.

    Use the entry and initialTab parameters to control which file is executed first and which tab is shown by default.

  • panes - Array of panes to show. Each element is one of: editor, player, transpiler.

    The default value is: ['editor', 'player']

  • vendorComponents - Array of 3rd party components to make available to the sandbox. The format is an array of either 2-element or 3-element arrays.

    • To use a CommonJS require-style loader, pass a 2-element array, where the first element is the require() name, and the second is the source url. E.g. to load moment.js: set vendorComponents to the value [['moment', 'https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js']]

    • To load a component as a property on window, pass a 3-element array, where the first element is the require() name, the second element is the window property name (e.g. window.moment), and the third element is the source url. E.g. to load moment.js: set vendorComponents to the value [['moment', 'moment', 'https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js']]

  • styles - An object containing style objects. If you're familiar with React Native, this is the foo in StyleSheet.create(foo). Styles passed will be vendor-prefixed automatically. The following named styles can be used to override default styling.

    • header
    • headerText
    • tab
    • tabText
    • tabTextActive
    • transpilerHeader
    • transpilerHeaderText
    • playerPane
    • playerHeader
    • playerHeaderText

    Example usage: {header: {backgroundColor: 'red'}}

Notes on setting parameters:

When used as an iframe, the easiest way to set the code parameter is to edit the code in the web player and copy and paste the url when you're done (the url updates automatically as you type).

Alternately, you can manually url-encode the parameters. You can do so programmatically or via the JavaScript console.

encodeURIComponent('Hello World')
# => "Hello%20World"

Hosting

This project contains static assets that run standalone in the browser. You don't need a server, unless you want to host the assets yourself.

MaxCDN

The recommended host is rawgit + MaxCDN. MaxCDN is highly performant and serves over http and https. The examples in this readme all point to:

<iframe width="880" height="425" frameborder="0" src="//cdn.rawgit.com/dabbott/react-native-web-player/v2.0.0-alpha.4/index.html"></iframe>
gh-pages

If you prefer, you may access the gh-pages branch directly. This has the advantage of always serving you the latest version, but the drawback of potentially failing on major API changes (along with slower download speeds for the assets).

<iframe width="880" height="425" frameborder="0" src="//dabbott.github.io/react-native-web-player/"></iframe>

Basic Examples

Advanced Examples

React/Redux To-do list with persistence

Transpiled output for ES6 const and let

Notes on advanced examples:

These examples are taken from React Native Express.

Advanced examples tend to have extremely long URLs which load successfully in an iframe but sometimes fail to load when opened by clicking a link.

Development

Run

npm install
npm run start
=> localhost:8080

Build

npm run build

Publish

First publish to npm.

npm version (major|minor|patch)
npm publish

Then publish to gh-pages and make a special tagged release for hosting via CDN.

# Point to the latest release
make TAG=v2.0.0-alpha.4

License

BSD

You can’t perform that action at this time.