@opentf/react-code-editor NPM

React Code Editor

Screenshot

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.