# React-Ace
[](#backers) [](#sponsors) [](https://greenkeeper.io/)
[](http://badge.fury.io/js/react-ace)
[](https://cdnjs.com/libraries/react-ace)
[](https://coveralls.io/github/securingsincity/react-ace?branch=main)
[](https://www.buymeacoffee.com/j)
A set of react components for Ace
_NOTE FOR VERSION 8!_ : We have stopped support for Brace and now use Ace-builds. Please read the documentation on how to migrate. Examples are being updated.
[DEMO of React Ace](https://securingsincity.github.io/react-ace/)
[DEMO of React Ace Split Editor](https://securingsincity.github.io/react-ace/split.html)
[DEMO of React Ace Diff Editor](https://securingsincity.github.io/react-ace/diff.html)
## Install
`npm install react-ace ace-builds`
`yarn add react-ace ace-builds`
## Basic Usage
```javascript
import React from "react";
import { render } from "react-dom";
import AceEditor from "react-ace";
import "ace-builds/src-noconflict/mode-java";
import "ace-builds/src-noconflict/theme-github";
import "ace-builds/src-noconflict/ext-language_tools";
function onChange(newValue) {
console.log("change", newValue);
}
// Render editor
render(
,
document.getElementById("example")
);
```
## Examples
Checkout the `example` directory for a working example using webpack.
## Documentation
[Ace Editor](https://github.com/securingsincity/react-ace/blob/master/docs/Ace.md)
[Split View Editor](https://github.com/securingsincity/react-ace/blob/master/docs/Split.md)
[Diff Editor](https://github.com/securingsincity/react-ace/blob/master/docs/Diff.md)
[How to add modes, themes and keyboard handlers](https://github.com/securingsincity/react-ace/blob/master/docs/Modes.md)
[Frequently Asked Questions](https://github.com/securingsincity/react-ace/blob/master/docs/FAQ.md)
[Migrate to version 8](https://github.com/securingsincity/react-ace/blob/master/docs/Migrate-v7-to-v8.md)
## Backers
Support us with a monthly donation and help us continue our activities. [[Become a backer](https://opencollective.com/react-ace#backer)]
## Sponsors
Become a sponsor and get your logo on our README on Github with a link to your site. [[Become a sponsor](https://opencollective.com/react-ace#sponsor)]
