rename package

README.md

@@ -0,0 +1,98 @@
+# monaco-react
+Monaco Editor for React
+
+## Motivation
+There is a well-known web technology based code editor called [Monaco Editor](https://microsoft.github.io/monaco-editor/) that powers [VS Code](https://code.visualstudio.com/). [There are also many ways to integrate](https://github.com/Microsoft/monaco-editor-samples/) it provided by monaco creators. But there were tons of problems with integration of monaco with modern technologies; e.g React.
+
+There also exist solutions for integration with React; e.g [this one](https://github.com/react-monaco-editor/react-monaco-editor) and [this one](https://wangchujiang.com/react-monacoeditor/). But they need some custom webpack (or other module bundler) configuration to make Monaco fully work, which is not the "best" solution for such kind of things like create-react-app - [CRA](https://facebook.github.io/create-react-app/).
+
+With this solution, you don't need any kind of webpack configuration files and it works great both with React apps created by CRA or created by something else.
+
+## Installation
+
+```bash
+yarn add @monaco-editor/react # or npm install @monaco-editor/react
+```
+
+## Usage
+
+Example
+```js
+import React, { useState } from 'react';
+import Editor from '@monaco-editor/react';
+
+const examples = { python: '# python example', javascript: '// javascript example' };
+
+function App() {
+  const [theme, setTheme] = useState('light');
+  const [language, setLanguage] = useState('javascript');
+  const [isEditorReady, setIsEditorReady] = useState(false);
+
+  function handleEditorDidMount() {
+    setIsEditorReady(true);
+  }
+  
+  function toggleTheme() {
+    setTheme(theme === 'light' ? 'dark' : 'light');
+  }
+  
+  function toggleLanguage() {
+    setLanguage(language === 'javascript' ? 'python' : 'javascript');
+  }
+
+  return (
+    <>
+      <button onClick={toggleTheme} disabled={!isEditorReady}>Toggle theme</button>
+      <button onClick={toggleLanguage} disabled={!isEditorReady}>Toggle language</button>
+
+      <Editor
+        height={500} // By default, it fully fits with its parent
+        theme={theme}
+        language={language}
+        value={examples[language]}
+        editorDidMount={handleEditorDidMount}
+        loading={'Loading...'}
+      />
+    </>
+  );
+}
+
+export default App;
+```
+
+## Props
+
+#### Editor
+
+| Name   |      Type      |  Default |  Description |
+|:----------|:-------------|:------|:------|
+| value | string || The editor value |
+| language | enum: ... | | All languages that are [supported](https://github.com/microsoft/monaco-languages) by monaco-editor |
+| editorDidMount | func | noop | **Signature: function(getEditorValue: func, monaco: object) => void** <br/> This function will be called right after monaco editor will be mounted and ready to work. It will get the editor instance as a second argument |
+| theme | enum: 'light' \| 'dark' | 'light' | Default themes of monaco |
+| line | number |  | The line to jump on it |
+| width | union: number \| string | '100%' | The width of the editor wrapper |
+| height | union: number \| string | '100%' | The height of the editor wrapper |
+| loading | union: React element \| string | 'Loading...' | The loading screen before the editor will be loaded |
+| options | object | {} | [IEditorOptions](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditoroptions.html) |
+
+#### DiffEditor
+
+| Name   |      Type      |  Default |  Description |
+|:----------|:-------------|:------|:------|
+| original | string || The original source (left one) value |
+| modified | string || The modified source (right one) value |
+| language | enum: ... | | All languages that are [supported](https://github.com/microsoft/monaco-languages) by monaco-editor |
+| originalLanguage | enum: ... | *language | This prop gives you the opportunity to specify the language of the `original` source separately, otherwise, it will get the value of `language` property. (Possible values are the same as `language`) |
+| modifiedLanguage | enum: ... | *language | This prop gives you the opportunity to specify the language of the `modified` source separately, otherwise, it will get the value of `language` property. (Possible values are the same as `language`) |
+| editorDidMount | func | noop | **Signature: function(getOriginalEditorValue: func, getModifiedEditorValue: func, monaco: object) => void** <br/> This function will be called right after monaco editor will be mounted and ready to work. It will get the editor instance as a third argument |
+| theme | enum: 'light' \| 'dark' | 'light' | Default themes of monaco |
+| line | number |  | The line to jump on it |
+| width | union: number \| string | '100%' | The width of the editor wrapper |
+| height | union: number \| string | '100%' | The height of the editor wrapper |
+| loading | union: React element \| string | 'Loading...' | The loading screen before the editor will be loaded |
+| options | object | {} | [IDiffEditorOptions](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.idiffeditorconstructionoptions.html) |
+
+## License
+
+[MIT](./LICENSE)

demo/README.md

@@ -1,4 +1,4 @@
 ### Monaco-React Demo
 
-This is the demo of [monaco-react](../) library.
+This is the demo of [@monaco-editor/react](../) package.
 It's hosted [here](monaco-react.surenatoyan.com)

demo/src/sections/DiffEditor/DiffEditor.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { DiffEditor as MonacoDiffEditor } from 'monaco-react';
+import { DiffEditor as MonacoDiffEditor } from '@monaco-editor/react';
 
 import { useStore } from 'store';
 import config from 'config';

demo/src/sections/Editor/Editor.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import MonacoEditor from 'monaco-react';
+import MonacoEditor from '@monaco-editor/react';
 import Settings from './Settings';
 
 import { useStore } from 'store';

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "monaco-react",
+  "name": "@monaco-react/react",
   "version": "0.0.1",
   "description": "Monaco Editor for React",
   "main": "lib/index.js",