mirror of
https://github.com/suren-atoyan/monaco-react.git
synced 2026-01-18 15:54:45 +00:00
111 lines
5.4 KiB
Markdown
111 lines
5.4 KiB
Markdown
# monaco-react
|
|
Monaco Editor for React
|
|
|
|
[](https://nodei.co/npm/@monaco-editor/react/)
|
|
|
|
## Synopsis
|
|
|
|
Monaco editor wrapper for painless integration with React applications without need of webpack (or other module bundler) configuration files.
|
|
|
|
## Motivation
|
|
There is a well-known web technology based code editor called [Monaco Editor](https://microsoft.github.io/monaco-editor/) that powers [VS Code](https://code.visualstudio.com/). [There are also many ways to integrate](https://github.com/Microsoft/monaco-editor-samples/) it provided by monaco creators. But there were tons of problems with integration of monaco with modern technologies; e.g React.
|
|
|
|
There also exist solutions for integration with React; e.g [this one](https://github.com/react-monaco-editor/react-monaco-editor) and [this one](https://github.com/jaywcjlove/react-monacoeditor). But they need some custom webpack configuration to make Monaco fully work, which is not the "best" solution for such kind of things like create-react-app - [CRA](https://facebook.github.io/create-react-app/).
|
|
|
|
With this solution, you don't need any kind of webpack configuration files and it works great with React apps created by CRA or created by something else.
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
yarn add @monaco-editor/react # or npm install @monaco-editor/react
|
|
```
|
|
|
|
## [Demo](https://monaco-react.surenatoyan.com/)
|
|
|
|
## Usage
|
|
|
|
Example
|
|
```js
|
|
import React, { useState } from 'react';
|
|
import Editor from '@monaco-editor/react';
|
|
|
|
const examples = { python: '# python example', javascript: '// javascript example' };
|
|
|
|
function App() {
|
|
const [theme, setTheme] = useState('light');
|
|
const [language, setLanguage] = useState('javascript');
|
|
const [isEditorReady, setIsEditorReady] = useState(false);
|
|
|
|
function handleEditorDidMount() {
|
|
setIsEditorReady(true);
|
|
}
|
|
|
|
function toggleTheme() {
|
|
setTheme(theme === 'light' ? 'dark' : 'light');
|
|
}
|
|
|
|
function toggleLanguage() {
|
|
setLanguage(language === 'javascript' ? 'python' : 'javascript');
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<button onClick={toggleTheme} disabled={!isEditorReady}>Toggle theme</button>
|
|
<button onClick={toggleLanguage} disabled={!isEditorReady}>Toggle language</button>
|
|
|
|
<Editor
|
|
height={500} // By default, it fully fits with its parent
|
|
theme={theme}
|
|
language={language}
|
|
value={examples[language]}
|
|
editorDidMount={handleEditorDidMount}
|
|
loading={'Loading...'}
|
|
/>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default App;
|
|
```
|
|
|
|
#### MonacoEditor instance
|
|
|
|
The second argument of `editorDidMount` is the instance of the editor. So, you can use it to get the full control on the editor if you need it.
|
|
|
|
## Props
|
|
|
|
#### Editor
|
|
|
|
| Name | Type | Default | Description |
|
|
|:----------|:-------------|:------|:------|
|
|
| value | string || The editor value |
|
|
| language | enum: ... | | All languages that are [supported](https://github.com/microsoft/monaco-languages) by monaco-editor |
|
|
| editorDidMount | func | noop | **Signature: function(getEditorValue: func, monaco: object) => void** <br/> This function will be called right after monaco editor will be mounted and ready to work. It will get the editor instance as a second argument |
|
|
| theme | enum: 'light' \| 'dark' | 'light' | Default themes of monaco |
|
|
| line | number | | The line to jump on it |
|
|
| width | union: number \| string | '100%' | The width of the editor wrapper |
|
|
| height | union: number \| string | '100%' | The height of the editor wrapper |
|
|
| loading | union: React element \| string | 'Loading...' | The loading screen before the editor will be loaded |
|
|
| options | object | {} | [IEditorOptions](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditoroptions.html) |
|
|
|
|
#### DiffEditor
|
|
|
|
| Name | Type | Default | Description |
|
|
|:----------|:-------------|:------|:------|
|
|
| original | string || The original source (left one) value |
|
|
| modified | string || The modified source (right one) value |
|
|
| language | enum: ... | | All languages that are [supported](https://github.com/microsoft/monaco-languages) by monaco-editor |
|
|
| originalLanguage | enum: ... | *language | This prop gives you the opportunity to specify the language of the `original` source separately, otherwise, it will get the value of `language` property. (Possible values are the same as `language`) |
|
|
| modifiedLanguage | enum: ... | *language | This prop gives you the opportunity to specify the language of the `modified` source separately, otherwise, it will get the value of `language` property. (Possible values are the same as `language`) |
|
|
| editorDidMount | func | noop | **Signature: function(getOriginalEditorValue: func, getModifiedEditorValue: func, monaco: object) => void** <br/> This function will be called right after monaco editor will be mounted and ready to work. It will get the editor instance as a third argument |
|
|
| theme | enum: 'light' \| 'dark' | 'light' | Default themes of monaco |
|
|
| line | number | | The line to jump on it |
|
|
| width | union: number \| string | '100%' | The width of the editor wrapper |
|
|
| height | union: number \| string | '100%' | The height of the editor wrapper |
|
|
| loading | union: React element \| string | 'Loading...' | The loading screen before the editor will be loaded |
|
|
| options | object | {} | [IDiffEditorOptions](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.idiffeditorconstructionoptions.html) |
|
|
|
|
## License
|
|
|
|
[MIT](./LICENSE)
|