# @opentf/react-code-editor

> A simple code editor for React JS.

Latest version **0.10.0** (published 2024-02-02) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @opentf/react-code-editor
pnpm add @opentf/react-code-editor
yarn add @opentf/react-code-editor
bun add @opentf/react-code-editor
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.10.0 |
| Published | 2024-02-02 |
| First published | 2023-05-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 100 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 0 |
| Author | Thanga Ganapathy |
| Maintainers | ganapathy |
| Keywords | simple, react, code, editor, syntax, highlight, format, prettier |

## Links

- npm: https://www.npmjs.com/package/@opentf/react-code-editor
- Repository: https://github.com/Open-Tech-Foundation/react-code-editor
- Homepage: https://github.com/Open-Tech-Foundation/react-code-editor#readme
- Issues: https://github.com/Open-Tech-Foundation/react-code-editor/issues
- npm.io page: https://npm.io/package/@opentf/react-code-editor

## Dependencies (2)

- [prettier](https://npm.io/package/prettier.md) 2.8.5
- [@opentf/utils](https://npm.io/package/@opentf/utils.md) ^0.22.1

## Alternatives

- [@oh-my-pi/pi-natives](https://npm.io/package/@oh-my-pi/pi-natives.md) — 51.8K weekly downloads
- [@capgo/capacitor-light-sensor](https://npm.io/package/@capgo/capacitor-light-sensor.md) — 3.0K weekly downloads
- [@heyhuynhgiabuu/pi-diff](https://npm.io/package/@heyhuynhgiabuu/pi-diff.md) — 492 weekly downloads
- [@lotsa/verdant-lang-asm](https://npm.io/package/@lotsa/verdant-lang-asm.md) — 38 weekly downloads
- [new-era-syntax](https://npm.io/package/new-era-syntax.md) — 20 weekly downloads

## Recent versions

- 0.10.0 (latest) — 2024-02-02
- 0.9.0 — 2023-05-13
- 0.8.0 — 2023-05-12
- 0.7.0 — 2023-05-11
- 0.6.0 — 2023-05-11
- 0.5.1 — 2023-05-11
- 0.5.0 — 2023-05-11
- 0.4.0 — 2023-05-11
- 0.3.0 — 2023-05-11
- 0.2.0 — 2023-05-10
- 0.1.0 — 2023-05-10

## README

<img align="left" src="https://open-tech-foundation.pages.dev/img/Logo.svg" width="50" height="50">

&nbsp;[OPEN TECH FOUNDATION](https://open-tech-foundation.pages.dev/)

<div align="center">

# React Code Editor

![Screenshot](./demo.gif)

</div>

> 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](https://prettier.io/)

- Syntax Errors via [Prettier](https://prettier.io/) formating

- Line numbers

## Installation

```sh
npm install @opentf/react-code-editor
```

```sh
yarn add @opentf/react-code-editor
```

```sh
pnpm add @opentf/react-code-editor
```

```sh
bun add @opentf/react-code-editor
```

## Usage

```ts
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.](#supported-themes)                                |
| 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](https://github.com/Thanga-Ganapathy) ([MIT License](./LICENSE)).

---
_Source: https://npm.io/package/@opentf/react-code-editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._