React-Ace-Builds

A set of react components for Ace

DEMO of React Ace-Builds

DEMO of React Ace-Builds Split Editor

DEMO of React Ace-Builds Diff Editor

Notice

This repository contains a fork of securingsincity/react-ace where unmaintained brace is replaced with ace-builds. This was motivated by a pull request created by @dennisoelkers.

Install

npm install react-ace-builds

Basic Usage

1import React from "react";
2import { render } from "react-dom";
3import AceEditor from "react-ace-builds";
4import "react-ace-builds/webpack-resolver-min";
5
6function onChange(newValue) {
7  console.log("change", newValue);
8}
9
10// Render editor
11render(
12  <AceEditor
13    mode="java"
14    theme="github"
15    onChange={onChange}
16    name="UNIQUE_ID_OF_DIV"
17  />,
18  document.getElementById("example")
19);

Examples

Checkout the example directory for a working example using webpack.

Documentation

Ace Editor

Split View Editor

Diff Editor

How to add modes, themes and keyboard handlers

Frequently Asked Questions