ronaco

Monaco Editor for React with typescript type definitions.

Getting started

Install ronaco using npm.

npm install --save ronaco

Add copy-webpack-plugin to your webpack.config.js:

const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
  plugins: [
    new CopyWebpackPlugin([
      {
        from: 'node_modules/monaco-editor/min/vs',
        to: 'vs'
      }
    ])
  ]
};

Import MonacoEditor from the library:

import { MonacoEditor } from 'ronaco';

Documentation

Prop Types

| Property | Type | Required? | Description | |:---|:---|:---:|:---| | language | "typescript", "javascript" | | Editor language; defaults to "javascript" | | theme | "vs", "vs-dark", "hc-black" | | Editor theme; defaults to "vs" | | width | String | | Editor width; defaults to "100%" | | height | String | | Editor height; defaults to "100%" | | value | String | | Initial editor model content; defaults to undefined | | onChange | Function | | onChange handler for editor model content; defaults to { } |

Example

import * as React from 'react';
import { MonacoEditor } from 'ronaco/dist';

export default class App extends React.Component {
  render() {
    return <MonacoEditor language="typescript" />;
  }
}

Credits

This library builds on the work of Leon Shi's excellent react-monaco-editor and Ted Driggs' amazing inferno-monaco-editor.