How to use CodeMirror in React Js - A step-by-step guide

If you are a front-end developer and have an idea to develop a code editor using react js then you can use Codemirror. It is an open-source JavaScript component that is used by developers to enable code editor in javascript-based applications. CodeMirror allows to implementation of a smooth code editor by using CodeMirror API.

Why CodeMirror?

CodeMirror has rich community support and provides frequent new release versions for developers. It is used to build a magnificent code editor with ReactJs and provides massive features like syntax highlighting, line numbers, autocompletion modularity, etc.

Here are some tips on how to use CodeMirror with ReactJs library -

Installation Guide

Install the CodeMirror package dependency with npm package manager or yarn inside your created ReactJs application folder

$ npm install @uiw/react-codemirror -- save

Now go to the react Js component and create a component file. In this file, you need to import the CodeMirror packages -

import CodeMirror from '@uiw/react-codemirror';

If you want to use any kind of editor theme like sublime-text and code editors theme like dracula So just import -

import 'codemirror/keymap/sublime';

Here is what the full code looks like -

import CodeMirror from '@uiw/react-codemirror';
import 'codemirror/keymap/sublime';
import 'codemirror/theme/monokai.css';
const code = 'const a = 0;';
<CodeMirror
value={code}
options={{
theme: 'monokai',
keyMap: 'sublime',
mode: 'jsx',
}}

/>

You can use your choice of programming modes and themes. Hope this installation guide helps.