react-js-livedeprecated

JS Playground

Usage no npm install needed!

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

README

JS Live

npm version Build Status Prettier

A React Component for live rendering and editing of HTML, CSS and JS.

screenshot

Usage

npm install react-js-live

import React from "react";
import JSLive from "react-js-live";
import "react-js-live/build/main.css";

function App() {
  return <JSLive id="test" snippets={snippets} mode="js" />;
}

Props:

  1. id

A string that uniquely identifies the frame on the page.

  1. snippets

Object containing keys: html, css and js. This is the initial code passed into the component.

const snippets = {
  html: `<p>HTML Content goes here</p>`,
  css: `.title { color: red; }`,
  js: `alert(js)`
};

  1. mode

    default: js

    1. html: Left tab defaults to HTML and Right defaults to Result
    2. js Left tab defaults to JS and Right tab to Console.

  2. theme

    default: Night Owl

    Any PrismJS theme.

Contributing

  1. Clone the repo
  2. npm install
  3. npm start