react-online-editor

Description

Write your own React Components without using Desktop IDE in React!

react-online-editor is a React component library that provides the ability to code and compile your React codes in a Web environment. It's not as powerful as CodeSandbox. It uses codemirror library to provide the amazing code editor UI.

NOTE: Currently, dependency import is not supported yet

Why react-online-editor

• The library gives the user a lot of flexibility since it just provided the code editor and compiling ability using Babel.
• You can choose your own theme for the codemirror editor or create your own too.
• It's lightweight and has a minimal configuration.

How it works

Using a similar idea to Webpack, it transpiles & wraps your code into a single factory function. It uses the global variable window in order to store the dependency map for dependency resolution. Everything is done in Javascript, and you can modify it easily.

Requirements

• Peer Dependencies: npm install react react-dom react-codemirror2 codemirror

Links

• Storybook
• Documentation

Installation

npm install react-online-editor

How to use

Bundler

Please refer to documentation for more detail

React Editor

Before using it, you need to run npm install @babel/preset-react.

| Props | Type | Description | | -------------------------- | ----------- | ----------- | | code | Code - { code: string, files: Dictionary } | Your React code, represented as a JSON object consisted of app (the main file) and files (file container in form of JSON object) | | currentFile | string | The current selected file (app, etc) | | storageKey | string | The localStorage key for storing the code | | codeEditorContext | string | The window key for storing the bundled code | | viewer | ReactRef | React reference object for rendering the React component |

Sample code:

import { useRef } from "react";
import { ReactEditor } from "react-online-editor";

function YourReactComponent() {
    const viewer = useRef();
    ...
    const code = { app: "function App() {\n  return <div>123</div>;\n}", files: {} };
    return <ReactEditor
            code={code}
            currentFile="App"
            viewer={viewer}
            codeEditorContext="my-react-editor" />;
}

Vue Editor

Before using it, you need to run npm install @vue/babel-plugin-jsx @vue/babel-preset-jsx @vue/babel-sugar-v-on.

| Props | Type | Description | | -------------------------- | ----------- | ----------- | | code | Code - { code: string, files: Dictionary } | Your Vue code, represented as a JSON object consisted of app (the main file) and files (file container in form of JSON object) | | currentFile | string | The current selected file (app, etc) | | storageKey | string | The localStorage key for storing the code | | codeEditorContext | string | The window key for storing the bundled code | | viewerId | string | Document ID for rendering the Vue component |

Sample code:

import { useRef } from "react";
import { VueEditor } from "react-online-editor";

function YourReactComponent() {
    ...
    const code = { app: 'const App = {\n  methods: {\n    test() {\n      console.log("hi");\n    }\n  },\n  render() {\n    return <button onClick={this.test}>Vue 3.0</button>;\n  },\n};', files: {} };
    return <VueEditor
            code={code}
            currentFile="App"
            viewer="app"
            codeEditorContext="my-react-editor" />;
}

Customizable Editor

Doesn't like the theme or want to support another framework/language? You can use CustomizableEditor

| Props | Type | Description | | -------------------------- | ----------- | ----------- | | code | Code - { code: string, files: Dictionary } | Your Vue code, represented as a JSON object consisted of app (the main file) and files (file container in form of JSON object) | | currentFile | string | The current selected file (app, etc) | | storageKey | string | The localStorage key for storing the code | | theme | string | CodeMirror theme | | keyMap | string | CodeMirror key map | | runCode | function(code: Code) | Process your code |

Sample code: ReactEditor

Use Cases

React-related Coding Guides

With react-online-editor, you can make your coding guides more interactive since you can try to code while learning. The idea is similar to Tour Golang and Svelte Tutorial.

Simple Code Snippet Server

Similar to CodeSandbox embeddable iframe, you can also create your own code snippet server.

Test & Experimentation

Using this library, you can test or experiment on a certain code without the need to wait for bundling.