react-ace-builds

A react component for Ace Editor

Usage no npm install needed!

<script type="module">
  import reactAceBuilds from 'https://cdn.skypack.dev/react-ace-builds';
</script>

README

React-Ace-Builds

logo

Greenkeeper badge npm version Build Status jsdeliver Coverage Status

A set of react components for Ace

DEMO of React Ace-Builds

DEMO of React Ace-Builds Split Editor

DEMO of React Ace-Builds Diff Editor

Notice

This repository contains a fork of securingsincity/react-ace where unmaintained brace is replaced with ace-builds. This was motivated by a pull request created by @dennisoelkers.

Install

npm install react-ace-builds

Basic Usage

import React from "react";
import { render } from "react-dom";
import AceEditor from "react-ace-builds";
import "react-ace-builds/webpack-resolver-min";

function onChange(newValue) {
  console.log("change", newValue);
}

// Render editor
render(
  <AceEditor
    mode="java"
    theme="github"
    onChange={onChange}
    name="UNIQUE_ID_OF_DIV"
  />,
  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