@yozora/react-code-renderer-jsx
v3.0.0-alpha.8
Published
render jsx code
Downloads
128
Maintainers
Readme
This package is designed to live render jsx, inspired by react live.
Install
npm
npm install --save @yozora/react-code-renderer-jsx
yarn
yarn add @yozora/react-code-renderer-jsx
Usage
Basic:
import styled from '@emotion/styled' import CodeRendererJsx from '@yozora/react-code-renderer-jsx' import React from 'react' const scope = { styled } function JsxPreview(props: { code: string, inline: boolean }) { const [error, setError] = React.useState<any>(null) return ( <div> <CodeRendererJsx code={props.code} inline={props.inline} scope={scope} onError={setError} /> <pre>{error}</pre> </div > ) }
Inline code: Render
React.ReactNode
directlyconst code = ` ( <div> <span>Hello, world</span> </div> ) ` const wrapper = <JsxPreview code={ code } inline={ true } >
Block code: Call the
render()
function withReact.ReactNode
explicitlyimport styled from '@emotion/styled' const code = ` const Container = styled.div\` background: hsl(0deg, 10%, 90%); \` render( <Container> <span style={{ color: 'orange' }}>Hello, world</span> </Container> ) ` const scope = { styled } const wrapper = ( <JsxPreview scope={scope} code={ code } inline={ false } /> )
Props
| Name | Type | Required | Default | Description |
| :-------: | :-----------------------: | :------------: | :-----: | :------------------------------ | -------------- |
| code
| string
| true
| - | Source code |
| inline
| boolean
| true
| - | inline
/ block
mode |
| scope
| Record<string, unknown>
| false
| {}
| Additional accessible variables |
| onError
| (error: string | null) => void
| true
| - | Error callback |