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.