react-ace

react-ace is a React component for the Ace Editor. Ace Editor is a high-performance, embeddable code editor written in JavaScript, designed to be easily integrated into any web page or JavaScript application. It supports over 110 languages, comes with 20+ themes, and is often considered a competitor to more heavyweight desktop editors in terms of features and performance.

`react-ace` wraps the Ace Editor, making it straightforward to use within a React application. It exposes the full functionality of the underlying Ace Editor via props and event handlers, aligning with React's component-based paradigm.

Key features and functionalities provided by `react-ace` include:
* Syntax Highlighting: Supports syntax highlighting for numerous programming languages (e.g., JavaScript, Python, HTML, CSS, Java, C++, Ruby, etc.).
* Theming: Offers a wide array of themes to customize the editor's appearance, ranging from light to dark modes.
* Language Modes: Each language has a specific "mode" that provides features like syntax highlighting, code folding, and sometimes autocompletion hints.
* Customizable Properties: Almost every aspect of the Ace Editor can be configured via props, such as line numbers, soft wraps, font size, read-only mode, and more.
* Event Handling: Provides props for handling various editor events like `onChange` (when content changes), `onLoad` (when the editor loads), `onBlur`, `onFocus`, `onSelectionChange`, etc.
* Code Folding: Allows users to collapse and expand blocks of code for better readability.
* Find and Replace: Built-in functionality for searching and replacing text within the editor.
* Autocompletion: Can be extended with language-specific autocompleters.
* Error Highlighting: Integration with linters or other analysis tools to highlight errors or warnings directly in the editor.

Why use `react-ace`?
Using `react-ace` simplifies the integration of a powerful code editor into your React projects. Instead of manually initializing and managing the Ace Editor instance, `react-ace` handles the lifecycle and exposes functionality as declarative props, which fits naturally into the React ecosystem. It's ideal for applications requiring an interactive code editor, such as online IDEs, code playgrounds, configuration editors, or documentation tools with executable examples.

Example Code

import React, { useState } from 'react';
import AceEditor from 'react-ace';

// Import modes (languages)
import 'ace-builds/src-noconflict/mode-javascript';
import 'ace-builds/src-noconflict/mode-html';
import 'ace-builds/src-noconflict/mode-css';

// Import themes
import 'ace-builds/src-noconflict/theme-monokai';
import 'ace-builds/src-noconflict/theme-github';
import 'ace-builds/src-noconflict/theme-tomorrow';

// Optional: Import extensions
import 'ace-builds/src-noconflict/ext-language_tools'; // For autocompletion, snippets, etc.

function CodeEditor() {
  const [code, setCode] = useState(`function helloWorld() {
  console.log("Hello, React-Ace!");
}
helloWorld();`);
  const [mode, setMode] = useState('javascript');
  const [theme, setTheme] = useState('monokai');

  function onChange(newValue) {
    console.log('Code changed:', newValue);
    setCode(newValue);
  }

  return (
    <div style={{ padding: '20px' }}>
      <h1>React-Ace Code Editor Example</h1>

      <div style={{ marginBottom: '10px' }}>
        <label htmlFor="mode-select">Select Mode: </label>
        <select id="mode-select" value={mode} onChange={(e) => setMode(e.target.value)}>
          <option value="javascript">JavaScript</option>
          <option value="html">HTML</option>
          <option value="css">CSS</option>
        </select>

        <label htmlFor="theme-select" style={{ marginLeft: '20px' }}>Select Theme: </label>
        <select id="theme-select" value={theme} onChange={(e) => setTheme(e.target.value)}>
          <option value="monokai">Monokai</option>
          <option value="github">GitHub</option>
          <option value="tomorrow">Tomorrow</option>
        </select>
      </div>

      <AceEditor
        mode={mode}
        theme={theme}
        onChange={onChange}
        name="unique-code-editor-instance"
        editorProps={{ $blockScrolling: true }}
        setOptions={{
          enableBasicAutocompletion: true,
          enableLiveAutocompletion: true,
          enableSnippets: true,
          showLineNumbers: true,
          tabSize: 2,
        }}
        value={code}
        fontSize={14}
        showPrintMargin={true}
        showGutter={true}
        highlightActiveLine={true}
        width="100%"
        height="500px"
      />

      <h2 style={{ marginTop: '20px' }}>Current Code:</h2>
      <pre style={{ backgroundColor: '#f0f0f0', padding: '10px', borderRadius: '5px' }}>
        {code}
      </pre>
    </div>
  );
}

export default CodeEditor;

Example Code

Related Topics