Skip to content
Playground wrapper around react-live
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
src
.babelrc
.editorconfig
.eslintrc
.gitignore
.travis.yml
README.md
example.png
package.json
rollup.config.js
yarn.lock

README.md

React Live Playground

NPM

Playground wrapper around React Live!

Install

npm install --save react-live-playground
# or
yarn add react-live-playground

Example

example

Live example on my blog post.

Usage

import React from "react";
import ReactLivePlayground from "react-live-playground";

const Example = () => (
  <div style={{ maxWidth: "600px" }}>
    <ReactLivePlayground code=`<button>Example Button</button>` />
  </div>
);

Props

code: String

See React Live for the kind of React code you can use here. Pure JSX works because react-live pre-renders.

theme: Object

A prism-react-renderer theme object. See more in the README for prism-react-renderer.

scope: Object

To use global packages other than React (included by default), you have to scope them into react-live. More info in the react-live README.

Other LiveProvider Props

noInline, transformCode, language, disabled -> These can be found in the <LiveProvider /> README section

editorClass: String

CSS class name you can apply to style the Live Editor

errorClass: String

CSS class name you can apply to style the Live Error

previewClass: String

CSS class name you can apply to style the Live Preview

You can’t perform that action at this time.