setCode(code)}\n highlight={code => highlight(code, languages.js)}\n padding={10}\n style={{\n fontFamily: '\"Fira code\", \"Fira Mono\", monospace',\n fontSize: 12,\n }}\n />\n );\n}\n```\n\nNote that depending on your syntax highlighter, you might have to include additional CSS for syntax highlighting to work.\n\n## Props\n\nThe editor accepts all the props accepted by `textarea`. In addition, you can pass the following props:\n\n- `value` (`string`): Current value of the editor i.e. the code to display. This must be a [controlled prop](https://reactjs.org/docs/forms.html#controlled-components).\n- `onValueChange` (`string => mixed`): Callback which is called when the value of the editor changes. You'll need to update the value prop when this is called.\n- `highlight` (`string => string | React.Node`): Callback which will receive text to highlight. You'll need to return an HTML string or a React element with syntax highlighting using a library such as [`prismjs`](https://prismjs.com).\n- `tabSize` (`number`): The number of characters to insert when pressing tab key. For example, for 4 space indentation, `tabSize` will be `4` and `insertSpaces` will be `true`. Default: `2`.\n- `insertSpaces` (`boolean`): Whether to use spaces for indentation. Default: `true`. If you set it to `false`, you might also want to set `tabSize` to `1`.\n- `ignoreTabKey` (`boolean`): Whether the editor should ignore tab key presses so that keyboard users can tab past the editor. Users can toggle this behaviour using `Ctrl+Shift+M` (Mac) / `Ctrl+M` manually when this is `false`. Default: `false`.\n- `padding` (`number`): Optional padding for code. Default: `0`.\n- `textareaId` (`string`): An ID for the underlying `textarea`, can be useful for setting a `label`.\n- `textareaClassName` (`string`): A className for the underlying `textarea`, can be useful for more precise control of its styles.\n- `preClassName` (`string`): A className for the underlying `pre`, can be useful for more precise control of its styles.\n\n## Demo\n\n[react-simple-code-editor.github.io/react-simple-code-editor](https://react-simple-code-editor.github.io/react-simple-code-editor/)\n\n## How it works\n\nIt works by overlaying a syntax highlighted `` block over a `
![](\"https://raw.githubusercontent.com/react-simple-code-editor/react-simple-code-editor/main/demo/demo.gif\")