https://github.com/nedomas/react-code-sandbox

⚡️ React code sandbox renders React JSX source code from string to components.
https://github.com/nedomas/react-code-sandbox

jsx react reactjs sandbox

Last synced: 15 days ago
JSON representation

⚡️ React code sandbox renders React JSX source code from string to components.

• Host: GitHub
• URL: https://github.com/nedomas/react-code-sandbox
• Owner: Nedomas
• Created: 2018-11-10T00:04:34.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2018-11-10T00:15:16.000Z (almost 6 years ago)
• Last Synced: 2024-10-11T21:02:23.302Z (25 days ago)
• Topics: jsx, react, reactjs, sandbox
• Language: JavaScript
• Homepage:
• Size: 42 KB
• Stars: 3
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React code sandbox

React code sandbox renders React JSX source code from string to components. It

takes source as a string and returns renderable JSX code.

## Install

```sh

yarn add react-code-sandbox

# or

npm install react-code-sandbox --save

```

## Usage

```jsx

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(

  


    This is a source string

  

)

`


// add this to your app

  {code}

```

## Render

`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'

```

## Imports

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.

## How it works

It uses [babel](https://babeljs.io) 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.

## Real world usage

React code sandbox is used throughout [Candour docs](https://candour.pro).