@lsky/react-monaco-editor v1.0.0-rc.9

Monaco Editor for React

Installing

$ yarn add @lsky/react-monaco-editor

Example

Editor

import React from 'react';
import examples from '@src/examples'
// component
import MonacoEditor from '@lsky/react-monaco-editor'


class Index extends React.Component {
  render() {
    return (
      <div style={{ padding: '20px' }}>
        <h2>Monaco Editor base example</h2>
        <MonacoEditor
          width={800}
          height={500}
          language="javascript"
          value={examples['javascript']}
          onChange={(value) => {
            console.log('editor value: ', value)
          }}
          editorDidMount={(editor, monaco) => {
            console.log("editor instance: ", editor)
            console.log("monaco: ", monaco)
          }}
        />
      </div>
    )
  }
}


export default Index

Diff

import React from 'react'
import { DiffEditor } from '@lsky/react-monaco-editor'
import { diffExamples } from '@src/example'


class Index extends React.PureComponent {
  render() {
    return (
      <DiffEditor
        width={600}
        height={400}
        original={diffExamples.original}
        modified={diffExamples.modified}
        language="markdown"
      />
    )
  }
}


export default Index

monaco Instance

import { monaco } from '@lsky/react-monaco-editor'

monaco.init()
  .then(monacoInstance => {
    // then
  })

Development

To build the example locally, run:

git clone https://github.com/lsky-walt/react-monaco-editor.git

cd react-monaco-editor

yarn install

yarn start

Monaco Editor

Props

Diff Editor

Props