https://github.com/ambar/react-livecode
Live Demo: https://ambar.li/react-livecode/
https://github.com/ambar/react-livecode
Last synced: 9 months ago
JSON representation
Live Demo: https://ambar.li/react-livecode/
- Host: GitHub
- URL: https://github.com/ambar/react-livecode
- Owner: ambar
- License: mit
- Created: 2019-03-13T12:54:51.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-26T05:41:37.000Z (almost 3 years ago)
- Last Synced: 2025-03-27T02:07:28.185Z (9 months ago)
- Language: JavaScript
- Homepage:
- Size: 4.32 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-livecode
> Experimental
Live code evaluating:
- Evaluate every expressions your typed, no need to use `console.log`.
- Inspect result side by side.
- Support modules (using `import`).
## Install
```
npm install react-livecode
```
## Usage
```js
import LiveCode from 'react-livecode'
import chunk from 'lodash/chunk'
render(
)
```
### `LiveCode` props
| Prop | Type | Default | Description |
| ----------- | --------- | -------------- | ----------------------------------------------------------------------------------------- |
| `scope` | `Object` | `{}` | Scope variables |
| `code` | `string` | `''` | Code to evaluate |
| `split` | `string` | `'horizontal'` | How to split editor and console, can be `horizontal` or `vertical` |
| `autoFocus` | `boolean` | `false` | Auto focus editor |
| `modules` | `boolean` | `true` | Enable using of [modules](https://developers.google.com/web/fundamentals/primers/modules) |
### Code highlighting
Import Prism styles to your page:
```js
import 'prismjs/themes/prism.css'
```
Or, load from external CDN:
```html
```