@uiw/react-codemirror basiert auf Codemirror 6, der neuesten Version des Editors, die eine modulare Architektur, verbesserte Leistung und neue Funktionen bietet.

react-codemirror2 ist eine Bindung für Codemirror 5, eine weit verbreitete, aber ältere Version des Editors, die immer noch viele Funktionen und eine große Benutzerbasis hat.

@uiw/react-codemirror bietet eine modulare Architektur, die es Entwicklern ermöglicht, nur die benötigten Funktionen und Plugins zu importieren, was die Bundle-Größe reduziert und die Leistung verbessert.

react-codemirror2 hat eine weniger modulare Struktur, was bedeutet, dass Entwickler möglicherweise mehr Code einbinden, als sie tatsächlich benötigen.

@uiw/react-codemirror bietet eine bessere Leistung dank der Optimierungen in Codemirror 6, die Rendering und Interaktion effizienter machen.

react-codemirror2 bietet eine solide Leistung, aber die ältere Architektur von Codemirror 5 kann bei sehr großen Dateien oder komplexen Bearbeitungen zu Verzögerungen führen.

@uiw/react-codemirror bietet erweiterte Anpassungsoptionen, einschließlich der Möglichkeit, Themen, Stile und Verhaltensweisen auf einer viel granulareren Ebene anzupassen.

react-codemirror2 ermöglicht Anpassungen, unterstützt jedoch nicht die gleiche Tiefe und Flexibilität wie Codemirror 6.

@uiw/react-codemirror hat eine wachsende Community und wird aktiv entwickelt, was bedeutet, dass es regelmäßige Updates und Verbesserungen gibt.

react-codemirror2 hat eine etablierte Community und stabile Unterstützung, aber die Entwicklung von Codemirror 5 ist weitgehend abgeschlossen, da der Fokus auf Codemirror 6 liegt.

import React from 'react';
import { CodeMirror } from '@uiw/react-codemirror';
import { javascript } from '@codemirror/lang-javascript';

const App = () => {
  return (
    <CodeMirror
      height="200px"
      theme="dark"
      extensions={[javascript()]}
      onChange={(value) => {
        console.log('Code:', value);
      }}
    />
  );
};

export default App;

import React from 'react';
import { Controlled as CodeMirror } from 'react-codemirror2';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';
import 'codemirror/mode/javascript/javascript';

const App = () => {
  const [code, setCode] = React.useState('// Your code here...');

  return (
    <CodeMirror
      value={code}
      options={{
        mode: 'javascript',
        theme: 'material',
        lineNumbers: true,
      }}
      onBeforeChange={(editor, data, value) => {
        setCode(value);
      }}
    />
  );
};

export default App;