React-Ace

A set of react components for Ace / Brace

DEMO of React Ace

DEMO of React Ace Split Editor

DEMO of React Ace Diff Editor

Install

npm install react-ace

Basic Usage

1import React from 'react';
2import { render } from 'react-dom';
3import brace from 'brace';
4import AceEditor from 'react-ace';
5
6import 'brace/mode/java';
7import 'brace/theme/github';
8
9function onChange(newValue) {
10  console.log('change',newValue);
11}
12
13// Render editor
14render(
15  <AceEditor
16    mode="java"
17    theme="github"
18    onChange={onChange}
19    name="UNIQUE_ID_OF_DIV"
20    editorProps={{$blockScrolling: true}}
21  />,
22  document.getElementById('example')
23);

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

Backers

Support us with a monthly donation and help us continue our activities. [Become a backer]

Sponsors

Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor]