Gathering detailed insights and metrics for @codingame/monaco-editor-react
Installations
npm install @codingame/monaco-editor-reactDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Node Version
20.10.0
NPM Version
10.9.2
Releases
43
Contributors
5
Languages
2
TypeScript
JavaScript
TypeScript (95.84%)
JavaScript (4.16%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
CodinGame
Download Statistics
Total Downloads
30,053
Last Day
6
Last Week
185
Last Month
496
Last Year
7,197
GitHub Statistics
18 Stars
172 Commits
3 Forks
5 Watchers
1 Branches
5 Contributors
Updated on Feb 15, 2025
Maintainers
6
Package Meta Information
Latest Version
11.0.1
Package Id
@codingame/monaco-editor-react@11.0.1
Unpacked Size
48.29 kB
Size
12.47 kB
File Count
17
NPM Version
10.9.2
Node Version
20.10.0
Published on
Feb 11, 2025
Total Downloads
Cumulative downloads
Total Downloads
30,053
Last Day
-14.3%
6
Compared to previous day
Last Week
15.6%
185
Compared to previous week
Last Month
19.2%
496
Compared to previous month
Last Year
-9.8%
7,197
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
1
Dev Dependencies
17
@codingame/commitlint-config-codingame@codingame/semantic-release-config-github@codingame/tsconfig@commitlint/cli@types/deep-equal@types/lodash.debounce@types/react@types/react-dom@typescript-eslint/eslint-plugin@typescript-eslint/parserconventional-changelog-conventionalcommitseslinteslint-plugin-reacteslint-plugin-react-hooksprettiertypescripttypescript-eslint
@codingame/monaco-editor-react · 
Synopsis
This library uses https://github.com/CodinGame/monaco-editor-wrapper
Please refer to this documentation
Installation
1npm install @codingame/monaco-editor-react
Usage
Simple usage
Here is an example of a simple integration of monaco editor with a React project.
You just need to import and render the Editor component:
1import React from "react"; 2import ReactDOM from "react-dom"; 3 4import Editor from "@codingame/monaco-editor-react"; 5 6function App() { 7 const [value, setValue] = useState('// some comment'); 8 return ( 9 <Editor 10 height="auto" 11 programmingLanguage="javascript" 12 value={value} 13 onChange={setValue} 14 /> 15 ); 16} 17 18const rootElement = document.getElementById("root"); 19ReactDOM.render(<App />, rootElement);
Models management
When you render the MonacoEditor component, there is 2 modes for the model management:
- if the model already exists, it will be reused and not disposed at the end
- if the model doesn't exist, it will be created and disposed at the end
This way, the editor is plug-and-play for simple use cases but it allows you to create your models before, use them in the editor and dispose them when you don't need them anymore
Differences with monaco-react
- This library outputs some dynamic
importand rely on webpack to handle them - The model management is different, either you manage your models by hands or let the editor create and destroy them
- no
onValidate: can be done directly with monaco.editor.onDidChangeMarkers - no theme prop: the theme can be changed using
monaco.editor.setTheme - To get the editor instance, use
refinstead ofhandleEditorDidMount - There is no
useMonaco, you can just use the exportedmonaco:import { monaco }, Editor from "@codingame/monaco-editor-react";
No vulnerabilities found.
No security vulnerabilities found.