# ReflexMonaco
A package wrapping [Monaco Editor](https://www.npmjs.com/package/@monaco-editor/react) for Reflex.
## Installation
```bash
pip install reflex-monaco
```
# Monaco Editor Component
## Overview
The Monaco Editor component is a versatile and powerful code editor that can be embedded in your application. This README provides an overview of its properties and triggers, allowing you to configure and interact with the editor effectively.
## Properties
### `default_language`
- **Description**: The default language to use for the editor.
- **Type**: `str`
### `default_path`
- **Description**: The path to the default file to load in the editor.
- **Type**: `str`
### `default_value`
- **Description**: The default value to display in the editor.
- **Type**: `str`
### `language`
- **Description**: The language to use for the editor.
- **Type**: `str`
### `line`
- **Description**: The line to jump to in the editor.
- **Type**: `int`
### `theme`
- **Description**: The theme to use for the editor.
- **Type**: `str`
### `value`
- **Description**: The value to display in the editor.
- **Type**: `str`
### `width`
- **Description**: The width of the editor.
- **Type**: `str`
### `height`
- **Description**: The height of the editor.
- **Type**: `str`
## Triggers
### `on_change`
- **Description**: Triggered when the editor value changes.
- **Signature**: `lambda e: [e]`
### `on_validate`
- **Description**: Triggered when the content is validated. (limited to some languages)
- **Signature**: `lambda e: [e]`
## Usage Example
Here is a basic example of how to use the Monaco Editor component:
```python
import reflex as rx
from reflex_monaco import monaco
@rx.page()
def index():
return monaco(
default_language='javascript',
default_value='console.log("Hello, world!");',
height='500px',
width='100%'
)
```
See the code of the demo for a case using State.
Raw data
{
"_id": null,
"home_page": null,
"name": "reflex-monaco",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.8",
"maintainer_email": null,
"keywords": "reflex, reflex-custom-components, monaco, editor, vscode",
"author": null,
"author_email": "Lendemor <thomas.brandeho@gmail.com>",
"download_url": "https://files.pythonhosted.org/packages/e3/c6/33520102d61451c0e537497660049cdd5e49f5d2eb06b362bc9f8d1d5306/reflex_monaco-0.0.2.tar.gz",
"platform": null,
"description": "# ReflexMonaco\n\nA package wrapping [Monaco Editor](https://www.npmjs.com/package/@monaco-editor/react) for Reflex.\n\n## Installation\n\n```bash\npip install reflex-monaco\n```\n\n# Monaco Editor Component\n\n## Overview\nThe Monaco Editor component is a versatile and powerful code editor that can be embedded in your application. This README provides an overview of its properties and triggers, allowing you to configure and interact with the editor effectively.\n\n## Properties\n\n### `default_language`\n- **Description**: The default language to use for the editor.\n- **Type**: `str`\n\n### `default_path`\n- **Description**: The path to the default file to load in the editor.\n- **Type**: `str`\n\n### `default_value`\n- **Description**: The default value to display in the editor.\n- **Type**: `str`\n\n### `language`\n- **Description**: The language to use for the editor.\n- **Type**: `str`\n\n### `line`\n- **Description**: The line to jump to in the editor.\n- **Type**: `int`\n\n### `theme`\n- **Description**: The theme to use for the editor.\n- **Type**: `str`\n\n### `value`\n- **Description**: The value to display in the editor.\n- **Type**: `str`\n\n### `width`\n- **Description**: The width of the editor.\n- **Type**: `str`\n\n### `height`\n- **Description**: The height of the editor.\n- **Type**: `str`\n\n## Triggers\n\n### `on_change`\n- **Description**: Triggered when the editor value changes.\n- **Signature**: `lambda e: [e]`\n\n### `on_validate`\n- **Description**: Triggered when the content is validated. (limited to some languages)\n- **Signature**: `lambda e: [e]`\n\n## Usage Example\nHere is a basic example of how to use the Monaco Editor component:\n\n```python\nimport reflex as rx\nfrom reflex_monaco import monaco\n\n@rx.page()\ndef index():\n return monaco(\n default_language='javascript',\n default_value='console.log(\"Hello, world!\");',\n height='500px',\n width='100%'\n )\n```\n\nSee the code of the demo for a case using State.\n",
"bugtrack_url": null,
"license": "Apache-2.0",
"summary": "A package wrapping Monaco Editor for Reflex",
"version": "0.0.2",
"project_urls": {
"homepage": "https://monaco-demo.reflex.run/",
"source": "https://github.com/Lendemor/reflex-monaco"
},
"split_keywords": [
"reflex",
" reflex-custom-components",
" monaco",
" editor",
" vscode"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "b0699407510ca8f9414636f541d3108e3a534db67155fec418f4a63a3c34fac0",
"md5": "7ab1d7a95300df6dd0ffe74346c62bf4",
"sha256": "74e2070b9ad0f5348050b47a99174ff7cfe3c65cdee203d4c93455cc670a3c78"
},
"downloads": -1,
"filename": "reflex_monaco-0.0.2-py3-none-any.whl",
"has_sig": false,
"md5_digest": "7ab1d7a95300df6dd0ffe74346c62bf4",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.8",
"size": 2996,
"upload_time": "2025-01-15T16:57:24",
"upload_time_iso_8601": "2025-01-15T16:57:24.575746Z",
"url": "https://files.pythonhosted.org/packages/b0/69/9407510ca8f9414636f541d3108e3a534db67155fec418f4a63a3c34fac0/reflex_monaco-0.0.2-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "e3c633520102d61451c0e537497660049cdd5e49f5d2eb06b362bc9f8d1d5306",
"md5": "f9cb9178da257589375fc44d062b23a8",
"sha256": "e48e49d895d21e512ba259459bbb25feb772af5b8036979c15f502c52941af46"
},
"downloads": -1,
"filename": "reflex_monaco-0.0.2.tar.gz",
"has_sig": false,
"md5_digest": "f9cb9178da257589375fc44d062b23a8",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.8",
"size": 2791,
"upload_time": "2025-01-15T16:57:26",
"upload_time_iso_8601": "2025-01-15T16:57:26.771318Z",
"url": "https://files.pythonhosted.org/packages/e3/c6/33520102d61451c0e537497660049cdd5e49f5d2eb06b362bc9f8d1d5306/reflex_monaco-0.0.2.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2025-01-15 16:57:26",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "Lendemor",
"github_project": "reflex-monaco",
"travis_ci": false,
"coveralls": false,
"github_actions": false,
"lcname": "reflex-monaco"
}
JSON
