https://securingsincity.github.io/react-ace/

React Ace Component
https://securingsincity.github.io/react-ace/

ace code-editor hacktoberfest javascript react reactjs

Last synced: 8 days ago
JSON representation

React Ace Component

• Host: GitHub
• URL: https://securingsincity.github.io/react-ace/
• Owner: securingsincity
• License: mit
• Created: 2014-11-29T05:15:14.000Z (over 9 years ago)
• Default Branch: main
• Last Pushed: 2024-05-02T01:01:40.000Z (about 2 months ago)
• Last Synced: 2024-05-02T01:02:06.349Z (about 2 months ago)
• Topics: ace, code-editor, hacktoberfest, javascript, react, reactjs
• Language: TypeScript
• Homepage: http://securingsincity.github.io/react-ace/
• Size: 54.4 MB
• Stars: 3,967
• Watchers: 31
• Forks: 604
• Open Issues: 204
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Lists

• awesome-list - react-ace - In browser code editor (React Libraries)

README

        
# React-Ace

![logo](https://github.com/securingsincity/react-ace/raw/master/logo.png)

[![Backers on Open Collective](https://opencollective.com/react-ace/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/react-ace/sponsors/badge.svg)](#sponsors) [![Greenkeeper badge](https://badges.greenkeeper.io/securingsincity/react-ace.svg)](https://greenkeeper.io/)

[![npm version](https://badge.fury.io/js/react-ace.svg)](http://badge.fury.io/js/react-ace)

[![CDNJS](https://img.shields.io/cdnjs/v/react-ace.svg)](https://cdnjs.com/libraries/react-ace)

[![Coverage Status](https://coveralls.io/repos/github/securingsincity/react-ace/badge.svg?branch=main)](https://coveralls.io/github/securingsincity/react-ace?branch=main)

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)]