Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@monaco-editor/react

Package Overview
Dependencies
Maintainers
1
Versions
100
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@monaco-editor/react

Monaco Editor for React - use the monaco-editor in any React application without needing to use webpack (or rollup/parcel/etc) configuration files / plugins

  • 4.6.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
693K
decreased by-15.47%
Maintainers
1
Weekly downloads
 
Created

What is @monaco-editor/react?

@monaco-editor/react is a React component for integrating the Monaco Editor, which is the code editor that powers Visual Studio Code, into React applications. It provides a simple way to embed a powerful code editor with syntax highlighting, IntelliSense, and other advanced features.

What are @monaco-editor/react's main functionalities?

Basic Usage

This code demonstrates how to use the @monaco-editor/react package to embed a basic Monaco Editor instance in a React application. The editor is set to use JavaScript language and the 'vs-dark' theme.

import React from 'react';
import { MonacoEditor } from '@monaco-editor/react';

function App() {
  return (
    <div>
      <MonacoEditor height="90vh" language="javascript" theme="vs-dark" />
    </div>
  );
}

export default App;

Customizing Editor Options

This example shows how to customize the editor options. The options object allows you to configure various aspects of the editor, such as making it read-only, changing the cursor style, and enabling automatic layout.

import React from 'react';
import { MonacoEditor } from '@monaco-editor/react';

function App() {
  const options = {
    selectOnLineNumbers: true,
    roundedSelection: false,
    readOnly: true,
    cursorStyle: 'line',
    automaticLayout: true
  };

  return (
    <div>
      <MonacoEditor height="90vh" language="javascript" theme="vs-dark" options={options} />
    </div>
  );
}

export default App;

Handling Editor Events

This example demonstrates how to handle editor events, such as content changes. The onChange prop is used to pass a callback function that will be called whenever the editor's content changes.

import React from 'react';
import { MonacoEditor } from '@monaco-editor/react';

function App() {
  const handleEditorChange = (value, event) => {
    console.log('Editor content changed:', value);
  };

  return (
    <div>
      <MonacoEditor height="90vh" language="javascript" theme="vs-dark" onChange={handleEditorChange} />
    </div>
  );
}

export default App;

Other packages similar to @monaco-editor/react

Keywords

FAQs

Package last updated on 06 Oct 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc