react-live-playground v1.1.2

React Live Playground

Playground wrapper around React Live!

Install

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

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