Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nihgwu/react-runner
Run your React code on the go
https://github.com/nihgwu/react-runner
live playground react
Last synced: about 19 hours ago
JSON representation
Run your React code on the go
- Host: GitHub
- URL: https://github.com/nihgwu/react-runner
- Owner: nihgwu
- License: mit
- Created: 2019-06-08T00:47:20.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-06-05T18:56:09.000Z (5 months ago)
- Last Synced: 2024-11-08T15:54:14.441Z (8 days ago)
- Topics: live, playground, react
- Language: TypeScript
- Homepage: https://react-runner.vercel.app
- Size: 4.72 MB
- Stars: 420
- Watchers: 3
- Forks: 20
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Runner
Run your React code on the go [https://react-runner.vercel.app](https://react-runner.vercel.app)
## Features
- Inline element
- Function component
- Class component, **with class fields support**
- Composing components with `render` or `export default`
- Server Side Rendering
- `import` statement
- [Multi files](https://react-runner.vercel.app/#multi-files)
- Typescript
With React Runner, you can write your live code in the real world way, check out Hacker News [in react-runner](https://react-runner.vercel.app/#hacker-news) vs [in real world](https://react-runner.vercel.app/examples/hacker-news), with the same code
You can even build your own async runner to support dynamic imports, try [Play React](https://play-react.vercel.app)
## Install
```bash
# Yarn
yarn add react-runner
# NPM
npm install --save react-runner
```
## Options
- **code** `string`, _required_ the code to be ran
- **scope** `object` globals that could be used in `code`
## Usage
```jsx
import { Runner } from 'react-runner'
const element =
```
or use hook `useRunner` with cache support
```jsx
import { useRunner } from 'react-runner'
const { element, error } = useRunner({ code, scope })
```
### `import` statement and multi files
```js
import { importCode } from 'react-runner'
import * as YourPkg from 'your-pkg'
const baseScope = {
/* base globals */
}
const scope = {
...baseScope,
// scope used by import statement
import: {
constants: { A: 'a' },
'your-pkg': YourPkg,
'./local-file': importCode(localFileContent, baseScope),
},
}
```
then in your live code you can import them
```js
import { A } from 'constants'
import Foo, { Bar } from 'your-pkg'
import What, { Ever } from './local-file'
export default function Demo() {
/* render */
}
```
## Browser support
```
"browserslist": [
"Chrome > 61",
"Edge > 16",
"Firefox > 60",
"Safari > 10.1"
]
```
## Resources
- [Play React](https://play-react.vercel.app/)
- [CodeMirror for React Runner](https://react-runner-codemirror.vercel.app/)
- [Storybook Addon](https://storybook.js.org/addons/storybook-addon-react-runner/)
## react-live-runner
`react-runner` is inspired by [react-live](https://github.com/FormidableLabs/react-live) heavily,
I love it, but I love arrow functions for event handlers instead of bind them manually as well as other modern features,
and I don't want to change my code to be compliant with restrictions, so I created this project,
use [Sucrase](https://github.com/alangpierce/sucrase) instead of [Bublé](https://github.com/bublejs/buble) to transpile the code.
If you are using `react-live` in your project and want a smooth transition, `react-live-runner` is there for you which provide the identical way to play with, and `react-live-runner` re-exports `react-runner` so you can use everything in `react-runner` by importing `react-live-runner`
```jsx
import {
LiveProvider,
LiveEditor,
LiveError,
LivePreview,
} from 'react-live-runner'
...
...
```
or hooks for better custom rendering
```jsx
import { useLiveRunner, CodeEditor } from 'react-live-runner'
const { element, error, code, onChange } = useLiveRunner({
initialCode,
scope,
transformCode,
})
...
<>
{element}
{error && {error}}
>
...
```
or use `react-runner` directly
```jsx
import { useState, useEffect } from 'react'
import { useRunner } from 'react-runner'
const [code, onChange] = useState(initialCode)
const { element, error } = useRunner({ code, scope })
useEffect(() => {
onChange(initialCode)
}, [initialCode])
...
<>
onChange(event.target.value)}>
{element}
{error && {error}}
>
...
```
Check the real world usage here https://github.com/nihgwu/react-runner/blob/master/website/src/components/LiveRunner.tsx
## License
MIT © [Neo Nie](https://github.com/nihgwu)