0
# Main Component
1
2
The primary React component that renders a CodeMirror 6 editor with full configuration support and declarative React interface.
3
4
## Capabilities
5
6
### ReactCodeMirror Component
7
8
The main component providing a complete CodeMirror editor interface.
9
10
```typescript { .api }
11
/**
12
* Main CodeMirror React component with full configuration support
13
* @param props - Component configuration and event handlers
14
* @param ref - Reference object for imperative API access
15
* @returns JSX element containing the CodeMirror editor
16
*/
17
declare const ReactCodeMirror: React.ForwardRefExoticComponent<
18
ReactCodeMirrorProps & React.RefAttributes<ReactCodeMirrorRef>
19
>;
20
21
export default ReactCodeMirror;
22
```
23
24
**Usage Examples:**
25
26
```typescript
27
import React from "react";
28
import CodeMirror from "@uiw/react-codemirror";
29
import { javascript } from "@codemirror/lang-javascript";
30
import { oneDark } from "@codemirror/theme-one-dark";
31
32
// Basic usage
33
function BasicEditor() {
34
const [code, setCode] = React.useState("console.log('Hello World');");
35
36
return (
37
<CodeMirror
38
value={code}
39
onChange={(value) => setCode(value)}
40
extensions={[javascript()]}
41
/>
42
);
43
}
44
45
// Advanced configuration
46
function AdvancedEditor() {
47
const [code, setCode] = React.useState("");
48
const editorRef = React.useRef();
49
50
const handleChange = React.useCallback((val, viewUpdate) => {
51
setCode(val);
52
console.log('Changed:', val);
53
}, []);
54
55
const handleStatistics = React.useCallback((stats) => {
56
console.log('Stats:', stats.lineCount, 'lines');
57
}, []);
58
59
return (
60
<CodeMirror
61
ref={editorRef}
62
value={code}
63
height="400px"
64
minHeight="200px"
65
theme={oneDark}
66
placeholder="Type your code here..."
67
autoFocus
68
indentWithTab
69
basicSetup={{
70
lineNumbers: true,
71
highlightActiveLine: true,
72
bracketMatching: true,
73
}}
74
extensions={[javascript({ jsx: true })]}
75
onChange={handleChange}
76
onStatistics={handleStatistics}
77
onCreateEditor={(view, state) => {
78
console.log('Editor created:', view);
79
}}
80
/>
81
);
82
}
83
```
84
85
### Component Props
86
87
Complete props interface for the ReactCodeMirror component.
88
89
```typescript { .api }
90
interface ReactCodeMirrorProps
91
extends Omit<EditorStateConfig, 'doc' | 'extensions'>,
92
Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'placeholder'> {
93
/** Value of the editor content */
94
value?: string;
95
96
/** Editor dimensions */
97
height?: string;
98
minHeight?: string;
99
maxHeight?: string;
100
width?: string;
101
minWidth?: string;
102
maxWidth?: string;
103
104
/** Focus behavior */
105
autoFocus?: boolean;
106
107
/** Placeholder content when editor is empty */
108
placeholder?: string | HTMLElement;
109
110
/** Theme configuration - 'light', 'dark', 'none', or custom Extension */
111
theme?: 'light' | 'dark' | 'none' | Extension;
112
113
/** Basic setup configuration */
114
basicSetup?: boolean | BasicSetupOptions;
115
116
/** Edit behavior */
117
editable?: boolean;
118
readOnly?: boolean;
119
indentWithTab?: boolean;
120
121
/** Event handlers */
122
onChange?(value: string, viewUpdate: ViewUpdate): void;
123
onStatistics?(data: Statistics): void;
124
onUpdate?(viewUpdate: ViewUpdate): void;
125
onCreateEditor?(view: EditorView, state: EditorState): void;
126
127
/** Extensions and configuration */
128
extensions?: Extension[];
129
root?: ShadowRoot | Document;
130
initialState?: {
131
json: any;
132
fields?: Record<string, StateField<any>>;
133
};
134
}
135
```
136
137
### Component Reference
138
139
Reference object returned by the component for imperative API access.
140
141
```typescript { .api }
142
interface ReactCodeMirrorRef {
143
/** Reference to the container DOM element */
144
editor?: HTMLDivElement | null;
145
/** Current CodeMirror editor state */
146
state?: EditorState;
147
/** Current CodeMirror editor view */
148
view?: EditorView;
149
}
150
```
151
152
**Usage Example:**
153
154
```typescript
155
import React from "react";
156
import CodeMirror from "@uiw/react-codemirror";
157
158
function EditorWithRef() {
159
const editorRef = React.useRef();
160
161
const focusEditor = () => {
162
if (editorRef.current?.view) {
163
editorRef.current.view.focus();
164
}
165
};
166
167
const getEditorContent = () => {
168
if (editorRef.current?.state) {
169
return editorRef.current.state.doc.toString();
170
}
171
return "";
172
};
173
174
return (
175
<div>
176
<button onClick={focusEditor}>Focus Editor</button>
177
<button onClick={() => console.log(getEditorContent())}>
178
Log Content
179
</button>
180
<CodeMirror
181
ref={editorRef}
182
value="// Initial code"
183
height="200px"
184
/>
185
</div>
186
);
187
}
188
```
189
190
### State Serialization
191
192
Support for persisting and restoring editor state using JSON serialization.
193
194
**Usage Example:**
195
196
```typescript
197
import React from "react";
198
import CodeMirror from "@uiw/react-codemirror";
199
import { historyField } from "@codemirror/commands";
200
201
const stateFields = { history: historyField };
202
203
function PersistentEditor() {
204
const [value, setValue] = React.useState(
205
localStorage.getItem('editorValue') || ''
206
);
207
208
const serializedState = localStorage.getItem('editorState');
209
210
const handleChange = (val, viewUpdate) => {
211
setValue(val);
212
localStorage.setItem('editorValue', val);
213
214
// Save state including history
215
const state = viewUpdate.state.toJSON(stateFields);
216
localStorage.setItem('editorState', JSON.stringify(state));
217
};
218
219
return (
220
<CodeMirror
221
value={value}
222
initialState={
223
serializedState
224
? {
225
json: JSON.parse(serializedState),
226
fields: stateFields,
227
}
228
: undefined
229
}
230
onChange={handleChange}
231
/>
232
);
233
}
234
```