ronaco
v0.8.2
Published
Monaco Editor for React with typescript type definitions
Downloads
7
Maintainers
Readme
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
.