React code sandbox renders React JSX source code from string to components. It takes source as a string and returns renderable JSX code.
yarn add react-code-sandbox
# or
npm install react-code-sandbox --save
import CodeSandbox from 'react-code-sandbox'
import React from 'react'
import { Text } from 'candour'
const code = `
import { render } from 'react-dom'
import React from 'react'
import { Text } from 'candour'
render(
<div>
This is a source string
</div>
)
`
// add this to your app
<CodeSandbox imports={{ React, Text }}>
{code}
</CodeSandbox>
render
is a special global variable that is injected into the code parser.
When you call render
, the source code of the first argument to it will be
returned from the sandbox.
This part is only used for display purposes and does not effect the source code.
import { render } from 'react-dom'
Any imports that you specify in the source code have no actual effects and are
removed by the parser. They are replaced with variables injected by
the imports
prop. When looking at the rendered code example,
it appears that libraries are imported, but they are just passed as local
variables under the scenes.
It uses babel in the browser to parse and convert the
source string into a usable JSX component. It will return parsed component
that was returned through render
in the source code.
React code sandbox is used throughout Candour docs.