@yozora/react-code-renderer-jsx NPM

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 directly

const code = `
  (
    <div>
      <span>Hello, world</span>
    </div>
  )
`

const wrapper = <JsxPreview code={ code } inline={ true } >

Block code: Call the render() function with React.ReactNode explicitly

import 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