2.1.2 • Published 3 years ago

live-example v2.1.2

Weekly downloads
3
License
MIT
Repository
github
Last release
3 years ago

live-example

React live code preview

In action (Playground)

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
}
2.1.2

3 years ago

2.1.1

3 years ago

2.1.0

3 years ago

2.0.0

3 years ago

1.2.1

3 years ago

1.2.0

4 years ago

1.1.1

4 years ago

1.1.3

4 years ago

1.1.2

4 years ago

1.1.0

4 years ago

1.0.0

4 years ago