https://github.com/moroboxai/moroboxai-editor-react

Embeddable code editor for coding AIs for MoroboxAI in React
https://github.com/moroboxai/moroboxai-editor-react

code-editor javascript library moroboxai react reactjs typescript

Last synced: about 2 months ago
JSON representation

Embeddable code editor for coding AIs for MoroboxAI in React

• Host: GitHub
• URL: https://github.com/moroboxai/moroboxai-editor-react
• Owner: moroboxai
• License: mit
• Created: 2022-04-21T06:36:47.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2023-11-01T07:52:47.000Z (about 1 year ago)
• Last Synced: 2024-10-04T18:07:45.810Z (3 months ago)
• Topics: code-editor, javascript, library, moroboxai, react, reactjs, typescript
• Language: TypeScript
• Homepage:
• Size: 1.77 MB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# moroboxai-editor-react

[![NPM version](https://img.shields.io/npm/v/moroboxai-editor-react.svg)](https://www.npmjs.com/package/moroboxai-editor-react)

![Node.js CI](https://github.com/moroboxai/moroboxai-editor-react/workflows/Node.js%20CI/badge.svg)

[![gitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/moroboxai/moroboxai-editor-react/blob/master/LICENSE)

[![Code Quality: Javascript](https://img.shields.io/lgtm/grade/javascript/g/moroboxai/moroboxai-editor-react.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/moroboxai/moroboxai-editor-react/context:javascript)

[![Total Alerts](https://img.shields.io/lgtm/alerts/g/moroboxai/moroboxai-editor-react.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/moroboxai/moroboxai-editor-react/alerts)

Embeddable code editor for coding AIs for [MoroboxAI](https://github.com/moroboxai) in [React](https://reactjs.org/).

## Installation

Using npm:

```bash

npm install moroboxai-editor-react --save

```

Or:

```bash

git clone https://github.com/moroboxai/moroboxai-editor-react.git

cd moroboxai-editor-react

npm i

npm run build

```

## Usage

Setup a simple React app with:

```bash

npx create-react-app my-app --template typescript

```

Add `moroboxai-editor-react` as a dependency:

```bash

cd my-app

npm install moroboxai-editor-react --save

```

Replace `src/App.tsx` with:

```javascript

import './App.css';

import Editor from 'moroboxai-editor-react';

function App() {

  return (

    


      

        

      

    

  );

}


export default App;

```

Build and start a local server to see the result:

```bash

npm run build

npm run start

```

## Playground

This package provides a minimal `React` app under the `playground` directory for playing with and testing the library.

You can run the playground locally on port 3000 with:

 ```bash

 git clone https://github.com/moroboxai/moroboxai-editor-react.git

 cd moroboxai-editor-react

 npm i

 cd playground

 npm i

 npm run dev

 ```

If you want to change something in the library, go to `moroboxai-editor-react/src/...`, the library will be automatically re-built and the playground will use the latest build

## Props

| Name   |      Type      |  Default |  Description |

|:----------|:-------------|:------|:------|

| language | string | javascript | Selected language |

| value | string || Initial content of the editor |

| width | string || Width of the `div` element |

| height | string || Height of the `div` element |

| className | string || Class name for the `div` container |

| onLoad | func | noop | **Signature: function(value: string) => void** 
 Function called when the Load button is clicked |

| onUnload | func | noop | **Signature: function() => void** 
 Function called when the Unload button is clicked |

## License

This content is released under the [MIT](http://opensource.org/licenses/MIT) License.