https://github.com/graphql-editor/hydra-ide
React wrapped monaco editor used in all graphql editor repositories
https://github.com/graphql-editor/hydra-ide
Last synced: 4 months ago
JSON representation
React wrapped monaco editor used in all graphql editor repositories
- Host: GitHub
- URL: https://github.com/graphql-editor/hydra-ide
- Owner: graphql-editor
- Created: 2021-03-31T11:33:30.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-04-19T14:18:28.000Z (about 5 years ago)
- Last Synced: 2025-09-29T08:49:59.960Z (9 months ago)
- Language: TypeScript
- Size: 50.8 KB
- Stars: 2
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# Hydra IDE
Hydra IDE is simplified code IDE component based on monaco editor for React apps. It has no dependencies as you have to install them yourself inside your project.
## Installation in React project
```sh
npm i hydra-ide
```
Install peer dependencies
```sh
npm i react react-dom monaco-editor
```
and install peer development dependencies. It usese webpack to add worker with monaco inside.
```sh
npm i -D webpack monaco-editor-webpack-plugin worker-loader file-loader css-loader
```
add monaco plugin to webpack.
```js
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = {
plugins: [
new MonacoWebpackPlugin({
// https://github.com/Microsoft/monaco-editor-webpack-plugin#options
// Add your languages here
languages: ['javascript'],
}),
],
};
```
You can check exact webpack configuration in `sandbox` folder.
## How to use?
### React Element Props
| Property | type | required | Description |
| ---------------------- | ------------------------------------------------------ | -------- | ------------------------------------------------------------------------------ |
| value | string | true | current code as string |
| setValue | (value:string) => void | true | triggered when editor sets the value |
| setValueOnBlur | (value:string) => void | false | triggered when editor sets the value on blur |
| className | string | false | class name |
| style | React.CSSProperties | false | style properties |
| theme | monaco.editor.IStandaloneThemeData | true | monaco editor theme |
| editorOptions | monaco.editor.IStandaloneEditorConstructionOptions | true | monaco editor options |
| depsToObserveForResize | React.DependencyList | false | dependency list same as in useEffect hook. Used to automatically resize editor |
| onMonaco | (editor: monaco.editor.IStandaloneCodeEditor) => void; | false | when monaco is mounted it will be passed here |
```tsx
import React, { useState } from 'react';
import HydraIDE from 'hydra-ide';
import { darken, lighten, toHex } from 'color2k';
export const Colors = {
grey: '#F3F3F4',
main: '#d966ff',
green: '#acf7c1',
yellow: '#cfee9e',
red: '#de3c4b',
orange: '#f18f01',
pink: '#e6bccd',
blue: '#17bebb',
sky: '#A3E7FC',
} as const;
export const Main = () => {
const [value, setValue] = useState('');
return (
);
};
```
## Develop
To run sandbox environment clone this repo, install deps and run start.
```sh
npm run start
```
## Roadmap
- easier token adding
- easier color customization