react-code-live

Live coding Component for React, with scoped CSS and Real Time Preview!

Demo page:

https://kais3rp.github.io/react-code-live/

Install

npm install --save react-code-live

Usage

The Editor works by default even without taking extra props

import React from 'react'
import Editor from 'react-code-live'

const App = () => <Editor/>
}

Styling

To style the components, you can use the className prop, that will style the main container, while to access the containers of the 4 components (JS Textarea, CSS Textarea, Preview and Error), you can use the dataset attributes of data-id to select the containers:

div[data-id="error-container"]
div[data-id="preview-container"]
div[data-id="js-container"]
div[data-id="css-container"]

You can also use the two wrappers:

div[data-id="jss-wrapper"]
div[data-id="css-wrapper"]

to style elements inside the container ( Controls && Error ) as absolute positioned overlays over the textareas (as you can see in the Demo).

API

| Prop | Type | Effect | Example | | --------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- | | className | String | It is applied to the main container 'div' | className="container" | | jsPlaceholder | String | The place holder for the JS Textarea | jsPlaceholder="WRITE JS CODE HERE" | | cssPlaceholder | String | The placeholder for the CSS Textarea | cssPlaceholder="WRITE CSS CODE HERE" | | initialJs | String | The JS code that you want to display as default content of the Textarea | initialJs={`function Test ( ){ return "hello"}} | | **initialCSS** | **String** | The CSS code that you want to display as default content of the Textarea | initialCss={\div { color: red; }`} | | icons | Object | You need to pass an object with a js and a css property and a JSX value, that JSX is intended to render some sort of indicator to distinguish the Textarea of JS from that of CSS | icons={{ js: <>JS</>, css:<>CSS</>}} | | showControls | Boolean | Shows the control buttons "Copy, Paste, Clear, Save, Load" | showControls={true} | | storageIdentifier | String | This id is used to identify the textarea to match the saved and loaded content on localStorage | storageIdentifier="js#first" | | scope | Object | In this object you can pass any JS variable that you want to be in scope with the code that will be written in the JS Textarea, you can pass anything, and it will be referenced inside | scope={{color: "magenta"}} | | getJsCode | Function | An handler that receives the JS code while it's written in the textarea | getJsCode={(code) => {console.log(code)}} | | getCssCode | Function | An handler that receives the CSS code while it's written in the textarea | getCssCode={(code) => {console.log(code)}} | | render | Function | A render prop that will expose js, and css code as params | render={(js,css) => <>{js}{css}</>} | | theme | Object | You can choose a theme style for the highligthers, according to PrismJS theme table | theme={{js: "funky", css: "coy"}} |

Themes:

|Name | |---| |coy| |funky| |dark| |okaidia| |tomorrow| |solarized|

The testing environment is still under development, so if you wish to contribute, please open an issue. Thanks.

License

MIT © Cesare Polonara