react-live-playgrounddeprecated

Playground wrapper around react-live

Usage no npm install needed!

<script type="module">
  import reactLivePlayground from 'https://cdn.skypack.dev/react-live-playground';
</script>

README

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