React Textarea Code Editor
A simple code editor with syntax highlighting.
Install
$ npm i @uiw/react-textarea-code-editor
Usage
import CodeEditor from '@uiw/react-textarea-code-editor';
function App() {
const [code, setCode] = React.useState(
`function add(a, b) {\n return a + b;\n}`
);
return (
<CodeEditor
value={code}
language="js"
onChange={(evn) => setCode(evn.target.value)}
padding={15}
style={{
fontSize: 12,
backgroundColor: "#f5f5f5",
fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace',
}}
/>
);
}
Props
interface TextareaCodeEditorProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
prefixCls?: string;
language?: string;
padding?: number;
minHeight?: number;
}
Demo
https://uiwjs.github.io/react-textarea-code-editor/
Development
Runs the project in development mode.
npm run watch
npm run start
production
Builds the app for production to the build folder.
npm run build
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
Related
License
Licensed under the MIT License.