https://github.com/mytecor/live-example
React live code preview
https://github.com/mytecor/live-example
jsx preview react sucrase
Last synced: 3 months ago
JSON representation
React live code preview
- Host: GitHub
- URL: https://github.com/mytecor/live-example
- Owner: mytecor
- Created: 2020-01-20T00:11:31.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-12-11T21:15:01.000Z (about 5 years ago)
- Last Synced: 2025-08-26T07:14:19.759Z (4 months ago)
- Topics: jsx, preview, react, sucrase
- Language: JavaScript
- Homepage: https://mytecor.github.io/live-example
- Size: 1.36 MB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# live-example
###### React live code preview
[In action (Playground)](https://mytecor.github.io/live-example)
#### Usage example
```js
import React from 'react'
import Compiler from 'live-example'
import CodeEditor from 'rmce'
import 'rmce/index.css'
function CustomButton({children}) {
return {children}
}
function Fallback({error}) {
return
{error.message}
}
let bindings = { CustomButton }
function MyFancyExample() {
let [code, setCode] = React.useState('TEST')
return
}
ReactDOM.render(, document.getElementById('root'))
```
##### Also you can use class components and raw jsx
```js
class extends React.Component {
render() {
return TEST
}
}
// or
TEST
```
#### Props
```ts
class Props {
// Current value of the code to compile
code: string = ''
// Bindings provided for sucrase
bindings: object = {}
// Fallback component
fallback: ComponentClass | FunctionComponent = () => null
}
```