@opentf/react-code-editor

 OPEN TECH FOUNDATION

React Code Editor

A simple code editor for React JS, useful for form code input.

Features

• Simple Editor (HTML Textarea based)

• Syntax Highlighting

• Multiple languages & themes are supported.

• Format code with Prettier

• Syntax Errors via Prettier formating

• Line numbers

Installation

npm install @opentf/react-code-editor

yarn add @opentf/react-code-editor

pnpm add @opentf/react-code-editor

bun add @opentf/react-code-editor

Usage

import { Editor } from '@opentf/react-code-editor';

export default function App() {
  const code = `export default function App() {
      return <h1>Hello world</h1>
    }
  `;

  return <Editor value={code} onChange={handleChange} />;
}

Props

Name	Type	Required	Default	Description
value	string	Yes	''	The value of the editor.
onChange	Function	No	undefined	The handler function for the value change event.
themes	Theme[]	No	[]	You can pass aditional themes to the editor via this prop.
languages	Lang[]	No	[]	By default only limited set of languages supported, you can extend additional languages support via this prop.
lang	string	No	'Plain Text'	The language syntax highlighting.
theme	string	No	'Light'	The theme name to apply a theme. See list of themes below.
style	object	No	{}	The styles will be applied to the root element of the editor component.
title	string	No	'Untitled'	The editor title. Eg: Config.json
config	object	No	{}	See the below table for config object.

Config:

Name	Type	Required	Default	Description
indent	string	No	'Space'	Indent code using "Space" or "Tab"
indentSize	number	No	2	The indent size.
textArea	object	No	{}	Any additional props for the code editor textarea element.

Supported Languages (With formatting)

✔️ JSON

⏳ HTML

⏳ JavaScript

⏳ TypeScript

⏳ CSS

⏳ GraphQL

⏳ TOML

⏳ YAML

Supported Languages (Without formatting)

✔️ Plain Text

⏳ Bash

⏳ Dockerfile

Supported Themes

• Dark

• Light (Default)

💡You can create your own themes easily, please refer any existing theme objects in the repo.

License

Copyright (c) Thanga Ganapathy (MIT License).