True Akyre Editor

A react code editor component with types created with monaco-editor . You just need insert <BasicEditor/>.

Installation

yarn add monaco-editor monaco-themes react-monaco-editor true-akyre-editor

Example

import React, {useEffect, useRef} from 'react';
import logo from './logo.svg';
import './App.css';
import {BasicEditor, BasicEditorRef} from "true-akyre-editor";

function App() {

    const ideRef= useRef<BasicEditorRef|null>(null)

    useEffect(() => {
        if (ideRef.current) {
            ideRef.current.toggleMinimap();
        }
    }, [ideRef])

    return (
        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo"/>
                <div style={{height: 400, width: 900}}>
                    <BasicEditor ref={ideRef} data={`import React, {useEffect, useRef} from 'react';\nimport logo from './logo.svg';\nimport './App.css';\nimport {BasicEditor, BasicEditorRef} from "true-akyre-editor";\n\nfunction App() {\n\n\tconst ideRef= useRef<BasicEditorRef|null>(null)\n\n\tuseEffect(() => {\n\t\tif (ideRef.current) {\n\t\t\tideRef.current.toggleMinimap();\n\t\t}\n\t}, [ideRef])\n\n\treturn (\n\t\t<div className="App">\n\t\t\t<header className="App-header">\n\t\t\t\t<img src={logo} className="App-logo" alt="logo"/>\n\t\t\t\t<div style={{height: 400, width: 900}}>\n\t\t\t\t\t<BasicEditor ref={ideRef} data={"{{ [id] }}"}/>\n\t\t\t\t</div>\n\t\t\t</header>\n\t\t</div>\n\t);\n}\n\nexport default App;`}/>
                </div>
            </header>
        </div>
    );
}

export default App;

Question?

You can contact me on discord Ibytek#9469 👍🏻