# react-code-live > Live coding Component for React code! Latest version **2.4.7** (published 2021-03-29) · MIT license · 0 weekly downloads ## Install ```sh npm install react-code-live pnpm add react-code-live yarn add react-code-live bun add react-code-live ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.4.7 | | Published | 2021-03-29 | | First published | 2021-03-16 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM + CommonJS | | Node | >=10 | | Dependencies | 7 | | Unpacked size | 195.4 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 6 | | Author | Cesare Polonara | | Maintainers | kaiserp | ## Links - npm: https://www.npmjs.com/package/react-code-live - Repository: https://github.com/Kais3rP/react-code-live - Homepage: https://github.com/Kais3rP/react-code-live#readme - Issues: https://github.com/Kais3rP/react-code-live/issues - npm.io page: https://npm.io/package/react-code-live ## Dependencies (7) - [buble](https://npm.io/package/buble.md) ^0.20.0 - [core-js](https://npm.io/package/core-js.md) ^3.9.1 - [prismjs](https://npm.io/package/prismjs.md) ^1.23.0 - [prop-types](https://npm.io/package/prop-types.md) ^15.7.2 - [style-scoped](https://npm.io/package/style-scoped.md) ^0.2.1 - [prism-react-renderer](https://npm.io/package/prism-react-renderer.md) ^1.2.0 - [react-simple-code-editor](https://npm.io/package/react-simple-code-editor.md) ^0.11.0 ## Recent versions - 2.4.7 (latest) — 2021-03-29 - 2.4.5 — 2021-03-29 - 2.4.4 — 2021-03-29 - 2.4.3 — 2021-03-24 - 2.4.2 — 2021-03-23 - 2.4.1 — 2021-03-22 - 2.4.0 — 2021-03-22 - 2.3.0 — 2021-03-22 - 2.2.0 — 2021-03-21 - 2.1.0 — 2021-03-20 - 2.0.0 — 2021-03-18 - 1.3.3 — 2021-03-18 - 1.3.2 — 2021-03-18 - 1.3.1 — 2021-03-18 - 1.3.0 — 2021-03-18 - … 8 more at https://npm.io/package/react-code-live/versions ## README [![NPM](https://img.shields.io/npm/v/react-code-live.svg)](https://www.npmjs.com/package/react-code-live) [![JavaScript Style Guide](https://img.shields.io/badge/linting-wesbos-green)](https://github.com/wesbos/eslint-config-wesbos) [![w3c](https://img.shields.io/w3c-validation/default?targetUrl=https%3A%2F%2Fkais3rp.github.io%2Freact-code-live%2F)](https://validator.w3.org/nu/?showsource=yes&showoutline=yes&showimagereport=yes&doc=https%3A%2F%2Fkais3rp.github.io%2Freact-code-live%2F) # react-code-live > Live coding Component for React, with scoped CSS and Real Time Preview! ## Demo page: [https://kais3rp.github.io/react-code-live/](https://kais3rp.github.io/react-code-live/) ## Install ```bash npm install --save react-code-live ``` ## Usage ### The Editor works by default even without taking extra props ```jsx import React from 'react' import Editor from 'react-code-live' const App = () => } ``` ## 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: ```css 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: ```css 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](https://github.com/Kais3rP) --- _Source: https://npm.io/package/react-code-live · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._