# react-monaco-editor-lite
>  
Latest version **1.3.16** (published 2024-09-05) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-monaco-editor-lite
pnpm add react-monaco-editor-lite
yarn add react-monaco-editor-lite
bun add react-monaco-editor-lite
```
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: has types; no vulnerabilities; high quality score.
Warnings: low downloads; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.3.16 |
| Published | 2024-09-05 |
| First published | 2022-05-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 2.7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 20 |
| Author | wwsun |
| Maintainers | wwsun, xhshen, yuzai |
| Keywords | editor, monaco |
## Links
- npm: https://www.npmjs.com/package/react-monaco-editor-lite
- Repository: https://github.com/x-orpheus/react-monaco-editor-lite
- Homepage: https://github.com/x-orpheus/react-monaco-editor-lite#readme
- Issues: https://github.com/x-orpheus/react-monaco-editor-lite/issues
- npm.io page: https://npm.io/package/react-monaco-editor-lite
## Dependencies (6)
- [onigasm](https://npm.io/package/onigasm.md) ^2.2.5
- [rc-menu](https://npm.io/package/rc-menu.md) ^9.13.0
- [rc-dropdown](https://npm.io/package/rc-dropdown.md) 4.2.0
- [monaco-editor](https://npm.io/package/monaco-editor.md) ^0.38.0
- [monaco-textmate](https://npm.io/package/monaco-textmate.md) ^3.0.1
- [monaco-editor-textmate](https://npm.io/package/monaco-editor-textmate.md) ^4.0.0
## Alternatives
- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads
## Recent versions
- 1.3.16 (latest) — 2024-09-05
- 1.0.69-beta.2 (beta) — 2022-08-16
- 1.3.15 — 2024-06-13
- 1.3.14 — 2024-06-11
- 1.3.13 — 2024-06-07
- 1.3.12 — 2024-06-03
- 1.3.11 — 2024-05-17
- 1.3.10 — 2024-05-17
- 1.3.9 — 2024-05-09
- 1.3.8 — 2024-05-07
- 1.3.7 — 2024-04-25
- 1.3.6 — 2024-04-25
- 1.3.5 — 2024-04-25
- 1.3.4 — 2024-04-25
- 1.3.3 — 2024-04-15
- … 33 more at https://npm.io/package/react-monaco-editor-lite/versions
## README
# react-monaco-editor-lite
## 如何使用
### 安装
```
npm install react-monaco-editor-lite
```
### 使用
#### 多文件编辑器
```js
import { MultiEditor } from 'react-monaco-editor-lite';
function IDE() {
const defaultFiles = {
'/src/app.jsx': `
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
(async () => {
const {Button} = await import('./Button.jsx');
const root = document.getElementById('root');
ReactDOM.render((
), root);
})();
`,
'/src/app.css': 'body { background: #fff }',
'/index.html': `
`,
'/src/test.ts': `
import { add } from './cc';
const App = () => {
console.log(add(1, 2));
};
export default App;
`,
'/src/cc.ts': `
export function add(a, b) {
return a + b;
}
export function minus(a, b) {
return a - b;
}
`
}
return (
)
}
export default IDE;
```
#### 单文件编辑器
```js
import { SingleEditor } from 'react-monaco-editor-lite';
import React, { useState } from 'react';
function SingleIDE() {
const [loc] = useState({
start: {
line: 3,
column: 1
},
end: {
line: 4,
column: 1
}
});
const [value, setValue] = useState(`
export function add(a, b) {
return a + b;
}
export function minus(a, b) {
return a - b;
}
`);
const onChange = (v) => {
setValue(v);
}
return (
)
};
export default SingleIDE;
```
#### 搜索文件
快捷键：command/ctrl + p
#### 搜索 & 替换文本
快捷键：shift + command/ctrl + f
#### 类型提示声明
MultiEditor 新增属性 extraLibs 配置额外的类型提示配置
#### 文件/目录右键菜单功能
MultiEditor 新增属性 useFileMenu 用于是否启用文件/目录右键菜单功能
### 组件参数及方法
查看此[文档](https://x-orpheus.github.io/react-monaco-editor-lite/public/docs/index.html)
---
_Source: https://npm.io/package/react-monaco-editor-lite · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._