moroboxai-editor-react
v0.1.1-alpha.11
Published
MoroboxAI editor for React
Downloads
2
Readme
moroboxai-editor-react
Embeddable code editor for coding AIs for MoroboxAI in React.
Installation
Using npm:
npm install moroboxai-editor-react --save
Or:
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:
npx create-react-app my-app --template typescript
Add moroboxai-editor-react
as a dependency:
cd my-app
npm install moroboxai-editor-react --save
Replace src/App.tsx
with:
import './App.css';
import Editor from 'moroboxai-editor-react';
function App() {
return (
<div className="App">
<header className="App-header">
<Editor
value={'function foo() {\n console.log("foo");\n}\n'}
width="500px"
height="400px"/>
</header>
</div>
);
}
export default App;
Build and start a local server to see the result:
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:
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 License.