monaco-react

Monaco Editor for React

Monaco Editor for React enables the seamless integration of the monaco-editor into any React application without the hassle of configuring webpack, rollup, parcel, or other module bundlers.

Key Features

• Support for React v19: Compatible with the latest version of React.
• TypeScript Integration: The package is fully rewritten with TypeScript for enhanced development experience.
• Multi-model Editor Support: Effectively handle multiple files with the integrated multi-model editor functionality.
• Development Playground: Test and experiment with the library's features in a dedicated development environment.
• Easy Setup: Simplifies the installation and setup process, making it usable with popular app generators like create-react-app, vite, and Next.js.

Getting Started

To get started, simply import the Editor component and render it in your component tree. Here’s a basic usage example:

import React from 'react';
import ReactDOM from 'react-dom';
import Editor from '@monaco-editor/react';

function App() {
  return <Editor height="90vh" defaultLanguage="javascript" defaultValue="// some comment" />;
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

For more advanced usage, consider using additional props like value, language, and path to control the editor's state and behavior:

<Editor
  height="90vh"
  language="javascript"
  value="// Write your code here"
  path="file.js"
/>

API Overview

The library provides several components and features:

• Editor: The main component that wraps the Monaco editor.
• DiffEditor: A component to visually compare differences between two pieces of code.
• useMonaco: A hook to access the Monaco instance.
• Loader Configuration: Customize the loading behavior of monaco files.

Extensibility

Developers can create customized editors by using the underlying loader utility, allowing for a high degree of flexibility in implementing unique functionalities suitable to various applications.

Documentation

For comprehensive documentation, including installation instructions, additional usage examples, and detailed prop descriptions, please refer to the repository documentation.

Try It Out

A live demo can be found at Monaco-React Demo. Experiment with the editor online to see its capabilities in action.