https://github.com/react-monaco-editor/react-monaco-editor/blob/master/src/editor.tsx
take ref from the above link
make a react js , code editor
us react0-final-form
editor should be reusebale
use plain jsx
Reusable Monaco Editor with React Final Form
I'll create a reusable code editor component using Monaco Editor and integrate it with react-final-form. Let's build this using plain JSX instead of TypeScript.
How to Use This Code Editor
This implementation provides a reusable Monaco Editor component integrated with react-final-form. Here's what each file does:
- monaco-editor.jsx: The core editor component that wraps Monaco Editor
- monaco-form-field.jsx: Connects the editor to react-final-form
- code-editor-form.jsx: A complete form with language/theme selection and submit/reset buttons
- example-usage.jsx: Shows how to use the component in your application
- styles.css: Basic styling for the components
Installation
To use this component, you'll need to install the following dependencies:
npm install monaco-editor react-final-form final-formIf you're using webpack, you'll also need:
npm install monaco-editor-webpack-pluginFor Create React App users, you can use the simpler @monaco-editor/react package:
npm install @monaco-editor/react react-final-form final-formFeatures
- ✅ Fully reusable Monaco Editor component
- ✅ Integration with react-final-form
- ✅ Language and theme selection
- ✅ Form validation
- ✅ Responsive design
- ✅ Plain JSX implementation (no TypeScript)
Example Usage
import React from 'react';
import CodeEditorForm from './components/code-editor-form';
function App() {
const handleSubmit = (values) => {
console.log('Code submitted:', values.code);
};
return (
<div className="app">
<h1>Code Editor</h1>
<CodeEditorForm
initialValues={{
code: 'console.log("Hello world!");',
language: 'javascript',
theme: 'vs-dark'
}}
onSubmit={handleSubmit}
/>
</div>
);
}
export default App;This implementation follows the structure of the react-monaco-editor repository you referenced while adapting it to work with react-final-form and using plain JSX instead of TypeScript.
I need to fix the dependency arrays in the useEffect hooks. Let me update the monaco-editor.jsx component:
Now the useEffect hook properly includes all the dependencies it uses. This ensures that:
- If any of these props change (options, value, language, theme, editorDidMount, onChange), the editor will be properly recreated with the new values.
- The cleanup function will run before the effect runs again, properly disposing of the previous editor instance and subscription.
The other useEffect hooks in the component are already correctly handling their specific prop changes (value, language, theme), so they don't need to be modified.
This change ensures that the Monaco Editor component will properly respond to all prop changes and avoid potential memory leaks or stale closures.
Would you like me to make any other improvements to the implementation?