securingsincity/react-ace

React Ace Component

Summary

react-ace is a set of React components that wrap the Ace browser code editor. Starting with version 8, the library switched from Brace to ace-builds for its underlying editor, and the project is distributed under the MIT license with TypeScript sources.

What it is useful for

react-ace is useful when you need to embed a syntax-highlighted, configurable code editor inside a React application. Typical scenarios include in-browser code playgrounds, configuration or snippet editors, and developer-tooling UIs. The package exposes the standard AceEditor component along with dedicated components for split-view editing and diff editing (the README links to demos for each). Modes, themes, and keyboard handlers are wired in through Ace's normal extension points, so anything Ace itself supports (language highlighting, themes, keybindings, language tools) can be applied to a React-rendered editor.

How engineers can use it

The README documents the installation step:

npm install react-ace ace-builds
# or
yarn add react-ace ace-builds

A minimal React entry point looks like this:

import React from "react";
import { render } from "react-dom";
import AceEditor from "react-ace";

import "ace-builds/src-noconflict/mode-java";
import "ace-builds/src-noconflict/theme-github";
import "ace-builds/src-noconflict/ext-language_tools";

function onChange(newValue) {
  console.log("change", newValue);
}

render(
  <AceEditor
    mode="java"
    theme="github"
    onChange={onChange}
    name="UNIQUE_ID_OF_DIV"
    editorProps={{ $blockScrolling: true }}
  />,
  document.getElementById("example")
);

The ext-language_tools import enables Ace's autocomplete and snippet features; importing different mode files switches the active syntax highlighter. The editorProps prop is forwarded to Ace, so options like $blockScrolling work as documented by Ace itself.

For fuller setups, the repository includes a working webpack example in the example directory, plus reference docs in docs/ for the standard editor, split view, diff view, modes/themes/keyboard handlers, an FAQ, and a v7-to-v8 migration guide.

Documented limitations to be aware of:

• Version 8 dropped support for Brace; existing projects on Brace must follow the migration guide in docs/Migrate-v7-to-v8.md.
• The README explicitly notes that examples are being updated for v8, so some snippets in the docs may still lag the current API.