live-example
v2.1.2
Published
React live code preview
Downloads
20
Maintainers
Readme
live-example
React live code preview
Usage example
import React from 'react'
import Compiler from 'live-example'
import CodeEditor from 'rmce'
import 'rmce/index.css'
function CustomButton({children}) {
return <button style={{color: 'red'}}>{children}</button>
}
function Fallback({error}) {
return <div className='error'>{error.message}</div>
}
let bindings = { CustomButton }
function MyFancyExample() {
let [code, setCode] = React.useState('<CustomButton>TEST</CustomButton>')
return <div id='example'>
<CodeEditor language='jsx' className='rmce' value={code} onChange={setCode}/>
<div id='preview'>
<Compiler code={code} bindings={bindings} fallback={Fallback}/>
</div>
</div>
}
ReactDOM.render(<MyFancyExample/>, document.getElementById('root'))
Also you can use class components and raw jsx
class extends React.Component {
render() {
return <button>TEST</button>
}
}
// or
<button>TEST</button>
Props
class Props {
// Current value of the code to compile
code: string = ''
// Bindings provided for sucrase
bindings: object = {}
// Fallback component
fallback: ComponentClass<FallbackProps> | FunctionComponent<FallbackProps> = () => null
}