simple editor reacct

1npm install react-simple-code-editor

1import React from "react";
2import Editor from "react-simple-code-editor";
3import { highlight, languages } from "prismjs/components/prism-core";
4import "prismjs/components/prism-clike";
5import "prismjs/components/prism-javascript";
6import "prismjs/themes/prism.css"; //Example style, you can use another
7
8function App() {
9  const [code, setCode] = React.useState(
10    `function add(a, b) {\n  return a + b;\n}`
11  );
12  return (
13    <Editor
14      value={code}
15      onValueChange={(code) => setCode(code)}
16      highlight={(code) => highlight(code, languages.js)}
17      padding={10}
18      style={{
19        fontFamily: '"Fira code", "Fira Mono", monospace',
20        fontSize: 12,
21      }}
22    />
23  );
24}