Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
docs
example
src
tests
.babelrc
.eslintrc
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
CODE_OF_CONDUCT.md
CONTRIBUTING.md
LICENSE
PULL_REQUEST_TEMPLATE.md
README.md
logo.png
package-lock.json
package.json
types.d.ts
webpack.config.base.js
webpack.config.development.js
webpack.config.example.js
webpack.config.production.js

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]

You can’t perform that action at this time.