All Projects → nksaraf → use-monaco

nksaraf / use-monaco

Licence: MIT license
Use 🗒️ monaco-editor in any ⚛️ React app with simple hooks 🎣

Programming Languages

typescript
32286 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to use-monaco

react-monacoeditor
Monaco Editor component for React.
Stars: ✭ 191 (+124.71%)
Mutual labels:  ide, monaco-editor
Orchestra
One language to be RegExp's Successor. Visually readable and rich, technically safe and extended, naturally scalable, advanced, and optimized
Stars: ✭ 103 (+21.18%)
Mutual labels:  ide, monaco-editor
wide
A lightweight web IDE (mostly a coding editor) based in monaco-editor (with a one-file server made in php). It allows to navigate the server with commands.
Stars: ✭ 42 (-50.59%)
Mutual labels:  ide, monaco-editor
Blazaco
A Blazor Component utilizing the Monaco editor by Microsoft
Stars: ✭ 23 (-72.94%)
Mutual labels:  monaco-editor, monaco
use-detect-print
A react hook to detect when a page is being printed
Stars: ✭ 55 (-35.29%)
Mutual labels:  react-hooks
book-fullstack-react
Fullstack React: The Complete Guide to ReactJS and Friends by Anthony Accomazzo
Stars: ✭ 100 (+17.65%)
Mutual labels:  react-hooks
mech
🦾 Main repository for the Mech programming language. Start here!
Stars: ✭ 135 (+58.82%)
Mutual labels:  ide
cide
A fast, lightweight C/C++ IDE for Linux and Windows
Stars: ✭ 33 (-61.18%)
Mutual labels:  ide
rust-monaco
Rust WASM bindings for the Monaco Editor
Stars: ✭ 23 (-72.94%)
Mutual labels:  monaco-editor
overture
The Overture Tool
Stars: ✭ 45 (-47.06%)
Mutual labels:  ide
mmpm
MagicMirror Package Manager
Stars: ✭ 104 (+22.35%)
Mutual labels:  monaco-editor
react-hooks-gatsby
Learn how to use React Hooks, and how they work with Gatsby. Watch the livestream:
Stars: ✭ 18 (-78.82%)
Mutual labels:  react-hooks
OpenHSP
Hot Soup Processor (HSP3)
Stars: ✭ 120 (+41.18%)
Mutual labels:  ide
code-server-openshift
Coder in your Kube/Docker/OpenShift cluster
Stars: ✭ 16 (-81.18%)
Mutual labels:  ide
Desk
Light-weight ide for competitive programming.
Stars: ✭ 34 (-60%)
Mutual labels:  ide
use-local-storage
A flexible React Hook for using Local Storage.
Stars: ✭ 57 (-32.94%)
Mutual labels:  react-hooks
7-react-admin-ts
用 ts + react-hooks 实现的管理后台
Stars: ✭ 23 (-72.94%)
Mutual labels:  react-hooks
dataflow-noflo
DEPRECATED prototype. To see the current work:
Stars: ✭ 54 (-36.47%)
Mutual labels:  ide
use-socket.io-client
https://www.npmjs.com/package/use-socket.io-client
Stars: ✭ 47 (-44.71%)
Mutual labels:  react-hooks
AShell
开发者常用脚本shell
Stars: ✭ 68 (-20%)
Mutual labels:  ide

🗒️ use-monaco

This works with monaco-editor v0.21.2, and has NOT been updated for more recent versions.

npm

  • Simple hooks to use monaco-editor in any React app
  • No webpack plugins or AMD loaders required while maintaining full support for monaco web-workers without build tools
  • Easy API for working with web-workers.
  • Headless (just hooks), so you can:
    • Render however you want (it's just a single div, style it as you wish)
    • Decide how to render loading state (loading prop is returned by the useMonacoEditor and useMonaco hooks)
    • Work with underlying monaco objects like monaco API, the editor instance, and the text model instances
    • Use the above objects in useEffect hooks together to wire up custom functionality
  • Inspired by @monaco-editor/react.
  • Availabe on Pika CDN. There is a simple example of using this below, (no build tool, just copy this html anywhere and you are golden).
  • Built with pkger
  • In progress: docs about setting up language providers, example with parcel, next.js, vanilla

Documentation

Example

<body>
  <div id="root"></div>
  <script defer type="module">
    import {
      useMonacoEditor,
      prettier,
    } from 'https://cdn.pika.dev/[email protected]';
    import themes from 'https://cdn.pika.dev/[email protected]/themes';
    import * as React from 'https://cdn.pika.dev/react';
    import ReactDOM from 'https://cdn.pika.dev/react-dom';
    import htm from 'https://cdn.pika.dev/htm';
    const html = htm.bind(React.createElement);

    let Editor = () => {
      const { containerRef, monaco, model, loading } = useMonacoEditor({
        plugins: [prettier(['graphql'])],
        themes,
        theme: 'github',
        path: 'model.graphql',
        defaultValue: ['type Query {}'].join('\n'),
      });

      return html`<div
        ref=${containerRef}
        style=${{ height: 800, width: 600 }}
      />`;
    };

    ReactDOM.render(html`<${Editor} />`, document.getElementById('root'));
  </script>
</body>

Installation

You can get use-monaco from yarn or npm:

yarn add use-monaco

#or
npm install use-monaco

or use it directly from a CDN like Pika or unpkg in browsers with ESM support:

import { useMonacoEditor } from 'https://cdn.pika.dev/use-monaco';
import { initialize } from 'https://cdn.pika.dev/use-monaco/worker';

import { useMonacoEditor } from 'https://unpkg.com/use-monaco';

useMonacoEditor

Single hook to get all monaco-editor documentation functionality for one editor instance that wires up the three underlying hooks useMonaco, useTextModel and useEditor. If you only need a single editor, useMonacoEditor will work fine for you as it allows you to send options for all underlying hooks. For multiple editors, you would need to use some of the other hooks like useTextModel and useEditor. Most props are optional, coming with sensible defaults. useMonacoEditor accepts the props for all these hooks and returns everything they return.

function useMonacoEditor(options: {
 ...useMonacoOptions, // see below
 ...useTextModelOptions,
 ...useEditorOptions
}): {
  // assign to a div to render editor
  containerRef: React.MutableRefObject<HTMLDivElement>;
  editor: monaco.editor.IStandaloneCodeEditor;
  loading: boolean;
  monaco: typeof monaco;
  model: monaco.editor.ITextModel;
};
  • useMonaco

    • Provides you with monaco-editor API namespace to work with, includes monaco.languages, monaco.editor
    • Extended monaco.worker API with for easy support for adding custom workers and languages
    • Added monaco.plugins API to enable functionality by simply registering plugins
    • Plugins for prettier, typings, graphql available out-of-the-box (backed by web-workers and completely opt-in)
    • Dedupes the request for the loading monaco-editor from the CDN across multiple calls
function useMonaco(options: {
  // plugins to enable, eg. [prettier(["graphql", "typescript"]), typings(), ...]
  plugins?: monaco.plugin.IPlugin[];
  paths?: {
    // Custom CDN link for monaco-editor
    vs?: string;
  };
  // A collection of themes that can be selected from
  themes?: { [key: string]: monaco.editor.IStandaloneThemeData };
  // Function will fire when monaco loads from the CDN (this is where you can load custom workers and languages)
  onLoad?: (monaco: typeof monaco) => (() => void) | void;
  // Function will fire when the theme is changed by any editor
  onThemeChange?: (newTheme: string, monaco: typeof monaco) => void;
}): {
  loading: boolean;
  monaco: typeof monaco;
};
  • useEditor

    • Creates a monaco code editor which provides a containerRef that you will need to render as a div in your React app.
    • Uses models to show content.
    • Can be used multiple times with multiple models to get a bunch of editors
    • Controlled and uncontrolled based on how you control the model
    • Returns editor instance so that you can play with it
function useEditor(options: {
  // must provide monaco instance from useMonaco hook
  monaco?: typeof monaco;

  // model to assign to editor (get this from useTextModel hook)
  model?: monaco.editor.ITextModel;

  // theme for the editor (can be a custom one or name of theme providede to useMonaco hook) [theme will change across editors]
  theme?: string | monaco.editor.IStandaloneThemeData;

  // Function to wire when the value of the model changes
  onChange?: (
    newValue: string,
    editor: monaco.editor.IStandaloneCodeEditor,
    event: monaco.editor.IModelContentChangedEvent,
    monaco: typeof monaco
  ) => void;

  // Function is fired before editor is created (can return options to be provided to the editor)
  editorWillMount?: (
    monaco: typeof monaco
  ) => monaco.editor.IEditorOptions | void;

  // Function is fired after editor is created, return disposables that will be cleared on unmount
  editorDidMount?: (
    editor: monaco.editor.IStandaloneCodeEditor,
    monaco: typeof monaco
  ) => monaco.IDisposable[] | Promise<void> | void;

  // Override internal monaco services for the editor
  overrideServices?:
    | monaco.editor.IEditorOverrideServices
    | ((monaco: typeof monaco) => monaco.editor.IEditorOverrideServices);
  options?: monaco.editor.IEditorOptions;
}): {
  // assign this ref to a div with some styling and you are good to go
  containerRef: React.MutableRefObject<HTMLDivElement>;
  editor: monaco.editor.IStandaloneCodeEditor;
};
  • useTextModel

    • Create models to be viewed on monaco editors
    • Create more that one for different files to show across editors
    • Basically a super simple file system backed by monaco models
    • Use path to select model
function useTextModel(options: {
  // must provide monaco instance from useMonaco hook
  monaco?: typeof monaco;
  // just the initial value for uncontrolled model
  defaultValue?: string;
  // or value for controlled mode
  value?: string;
  // or dictionary of paths to the content of the files (path is used to determine value of the file)
  files?: { [key: string]: string };

  // path of the model you want to select, a new model is created if one doesn't exist
  path?: string;
  // language of the model (can normally be interpreted from path extension)
  language?: string;
  // create models for all files eagerly
  syncAllFiles?: boolean;
}): monaco.editor.ITextModel;

Example of using the hooks separately,

<body>
  <div id="root"></div>
  <script defer type="module">
    import {
      useMonaco,
      useEditor,
      useTextModel,
      prettier,
    } from 'https://cdn.pika.dev/[email protected]';
    import themes from 'https://cdn.pika.dev/[email protected]/themes';
    import * as React from 'https://cdn.pika.dev/react';
    import ReactDOM from 'https://cdn.pika.dev/react-dom';
    import htm from 'https://cdn.pika.dev/htm';
    const html = htm.bind(React.createElement);

    let Editor = () => {
      const { monaco, loading } = useMonaco({
        plugins: [prettier(['graphql'])],
        themes,
        theme: 'github',
      });

      const model = useTextModel({
        path: 'model.graphql',
        defaultValue: ['type Query {}'].join('\n'),
      });
      const { containerRef } = useEditor({ monaco, model });

      return html`<div
        ref=${containerRef}
        style=${{ height: 800, width: 600 }}
      />`;
    };

    ReactDOM.render(html`<${Editor} />`, document.getElementById('root'));
  </script>
</body>

Working with workers

monaco-editor is already using a bunch of workers for languages like typescript, html, css as well some editor services. You can add custom workers to offload work for your custom functionality from the main thread. This can ensure that the UI doesn't lag or your typing experience is not harmed by these computations like linting, etc. happening. You can register workers in your components using the monaco.worker api available on the main thread. Workers are also used to provide core language functionality to monaco by registering providers to things like hover, auto-complete, validation, formatting, etc. There is an easy API to enable this as well provided by use-monaco.

// Register the worker in onLoad or in an effect (remember to cleanup)
monaco.worker.register({
  label: 'babel',
  src: () =>
    new Worker('./path.to.worker.js', {
      // to use esm syntax in worker
      type: 'module',
    }),
});

You worker needs to follow a simple interface to work with use-monaco.

import { initialize, BaseWorker } from 'use-monaco/worker';
// or https://unpkg.com/use-monaco/dist/esm/worker.js to load from CDN

// Extend BaseWorker to get the ability to use the monaco models on the worker side.
class BabelWorker extends BaseWorker {
  transpile(path) {
    const text = this.getText(path);
    // do some hard work;
    const transpiled = Babel.transpile(text);
    return transpiled;
  }
}

// call initialize to setup the worker to communicate with monaco
initialize('babel', BabelWorker);

And then you can use the worker on the main thread by retreiving the worker using its label and syncing the models you would need on the backend. You can then use the functions that were exposed by the worker as async functions.

// You get a proxy to the registered worker with the contents
// of the files that you mention here synced. The worker has to extend a simple interface
const worker = await monaco.worker.get('babel', 'model1.ts', 'model2.ts');
const something = await worker.transpile('model.ts');
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].