https://github.com/mytecor/live-example

React live code preview
https://github.com/mytecor/live-example

jsx preview react sucrase

Last synced: 11 days 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 5 years ago)
• Default Branch: master
• Last Pushed: 2020-12-11T21:15:01.000Z (about 4 years ago)
• Last Synced: 2024-03-26T10:21:19.603Z (9 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

}

```