JavaScript HTML CSS
Permalink
Failed to load latest commit information.
.github Update ISSUE_TEMPLATE.md May 26, 2017
docs Removed function signature from string exec property in "Change key-b… Aug 2, 2018
example Ignore .DS_Store files (#500) Aug 7, 2018
src Diff responds to value change (#480) Jul 3, 2018
tests On receiving props, process editor value update in priority (#477) Jun 28, 2018
.babelrc Update to support webpack 4 Feb 25, 2018
.eslintrc chore(package): update eslint-plugin-react to version 7.8.1 (#442) May 12, 2018
.gitignore Ignore .DS_Store files (#500) Aug 7, 2018
.npmignore add some stuff to npmignore Sep 14, 2015
.travis.yml Update to node 10 in .travis.yml (#448) May 17, 2018
CHANGELOG.md Up version to 6.1.4 Jul 3, 2018
CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md Jun 15, 2017
CONTRIBUTING.md Add contribution, issue and pull request templates May 21, 2017
LICENSE Initial commit Nov 29, 2014
PULL_REQUEST_TEMPLATE.md Add contribution, issue and pull request templates May 21, 2017
README.md Additional Diff documentation (#470) Jun 25, 2018
logo.png Add logo Jun 20, 2018
package-lock.json chore(package): update eslint-plugin-react to version 7.8.1 (#442) May 12, 2018
package.json chore(package): update webpack to version 4.16.5 (#501) Aug 7, 2018
types.d.ts AceOptions interface missing debounceChangePeriod (#494) Jul 23, 2018
webpack.config.base.js Update to support webpack 4 Feb 25, 2018
webpack.config.development.js Update to support webpack 4 Feb 25, 2018
webpack.config.example.js Added Diffing component based on the Split editor (#417) Apr 10, 2018
webpack.config.production.js Update to support webpack 4 Feb 25, 2018

README.md

React-Ace

logo

Backers on Open Collective Sponsors on Open Collective Greenkeeper badge

npm version Build Status CDNJS Coverage Status

Buy Me A Coffee

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

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

import 'brace/mode/java';
import 'brace/theme/github';

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

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]