React Easy Code Editor

React easy code editor is a small and simple library that aims to provide the user a much improved experience and increased performance over the popular libraries react-simple-code-editor and react-textarea-code-editor while maintaining a small build size and concise code base. This library is for those who value usability and simplicity but do not need somthing fully featured like the codemirror or monaco editors. Perfect for example code embeds, forms where code can be submitted, or simply as an input with line numbering.

Check out the homepage or install the package from npm:

npm install react-easy-code-editor

Features:

• 🔢 Line numbering
• 🌒 Themeing
• ✨ Dynamic Syntax highlighting
• 📜 Does not wrap lines
• ☂️ Wrap selected code with: [] () <> {} "" '' "" ``
• 🪜 Automatic indent on new lines
• 🔄 Basic undo/redo stack

Basic Usage

See the examples folder for more.

import { useState } from "react";
import EasyCodeEditor from "react-easy-code-editor";

// A third party library is not needed for syntax highlighing
// A custom highlight function can be created instead
import { highlight, languages } from "prismjs/components/prism-core";
import "prismjs/components/prism-clike";
import "prismjs/components/prism-javascript";
import "prismjs/themes/prism.css"; // prismjs offers other themes

// If you prefer highlight.js
// import hljs from "highlight.js/lib/core";
// import javascript from "highlight.js/lib/languages/javascript";
// A style that does not affect font sizing needs to be used
// import "highlight.js/styles/qtcreator-light.css";

// hljs.registerLanguage("javascript", javascript);

const App = () => {
  // Optionally controll the editors state
  const [code, setCode] = useState(`console.log("Hello, World!");`);
  return (
    // The editor will fill the width/height of its parent
    <div style={{ height: 500 }}>
      <EasyCodeEditor
        // The editor will manage its own state when no value is passed in
        value={code}
        // Handle updated code
        onChange={(code) => setCode(code)}
        // Handle syntax highlighting
        highlight={(code) => highlight(code, languages.js)}
        // For highlight.js
        // highlight={(code) => hljs.highlight(code, { language: "javascript" }).value}
      />
    </div>
  );
};

export default App;

<EasyCodeEditor />

All props are optional.

Prop Name	Type	Default Value	Description
value	string	undefined	The value(code) to display in the editor. The editor will manage it's own state if no value is passed in.
onChange	(code: string) => void	(code) => {}	Listen for any value changes in the editor.
highlight	(code: string) => string | JSX.Element | JSX.Element[]	(code) => htmlEscapedCode	Function to handle syntax highlighting. Html characters must be escaped if a custom function is used(Does not apply if using JSX).
placeholder	string	undefined	Placeholder to display when no code is present in the editor.
dynamicHighlight	boolean	true	Enable or disable highlighting the currently visible range of lines in the editor. Disabling will cause degraded performace on medium to large documents. If the parent element does not have a set height then this should be disabled.
readOnly	boolean	false	Disables the editor allowing only viewing the current value.
autoIndent	boolean	true	Maintain the current level of indentation on new lines.
wrapParens	boolean	true	Wrap selected code with: [] () <> {} "" '' "" ``
trapTab	boolean	false	Trap the tab character in the editor for indentation with the tab key. You should avoid doing this for accessibility reasons.
tabWidth	number	2	Determines the number of spaces to be inserted on tab key press. Ignored if trapTab is false.
showLineNumbers	boolean	true	Show or hide line numbers.
theme	EasyCodeEditor.Theme	EasyCodeEditor.DefaultLight	Simple styling for the editor using a theme object.

Theming

// Import a theme of choice
import EasyCodeEditor, { DefaultDark } from "react-easy-code-editor";

// Apply theme to code editor
<EasyCodeEditor theme={DefaultDark} />;

// Alternativly define a custom theme with css styles
// All suported/required styles are shown here
const myTheme = {
  border: "1px solid black",
  backgroundColor: "white",
  color: "black",
  numbersBackgroundColor: "white",
  numbersColor: "black",
  numbersBorder: "1px solid black",
  caretColor: "black",
  font: "inherit",
  fontSize: 16,
};