react-ace-builds

React-Ace-Builds

A set of react components for Ace

DEMO of React Ace

DEMO of React Ace Split Editor

DEMO of React Ace Diff Editor

Notice

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

Install

npm install react-ace-builds

Basic Usage

import React from "react";
import { render } from "react-dom";
import AceEditor from "react-ace-builds";
import "ace-builds/webpack-resolver";

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

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

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