@uiw/react-codemirrorは、最新のCodeMirror 6を使用しており、モジュラー設計とプラグインシステムを採用しています。これにより、必要な機能だけをインポートして使用できるため、バンドルサイズを小さく保ちながら、柔軟なカスタマイズが可能です。

react-codemirror2は、CodeMirror 5に基づいており、成熟した機能セットと広範なドキュメントを提供しています。特に、既存のCodeMirror 5プロジェクトとの互換性が高く、移行が容易です。

@uiw/react-codemirrorは、CodeMirror 6のプラグインアーキテクチャを活用しており、カスタムテーマやエディタ機能を簡単に作成できます。特に、スタイルや機能を細かく調整したい開発者にとって、柔軟性が高いです。

react-codemirror2は、CodeMirror 5のカスタマイズ機能を引き継いでおり、テーマの変更やエディタの設定を簡単に行えます。ただし、プラグインシステムはCodeMirror 6ほど柔軟ではないため、より高度なカスタマイズには限界があります。

@uiw/react-codemirrorは、CodeMirror 6のモジュラーアーキテクチャにより、必要な機能だけを読み込むことができるため、パフォーマンスが向上しています。特に、大規模なドキュメントや多くのプラグインを使用する場合でも、リソースの使用を最小限に抑えることができます。

react-codemirror2は、CodeMirror 5に基づいているため、パフォーマンスは安定していますが、特に大規模なプロジェクトや多くのプラグインを使用する場合、リソースの使用が増加する可能性があります。

@uiw/react-codemirrorは、比較的新しいライブラリですが、活発に開発されており、コミュニティも成長しています。特に、CodeMirror 6に関するドキュメントが充実しており、最新の機能を活用するためのリソースが豊富です。

react-codemirror2は、長年にわたって開発されてきたライブラリで、成熟したコミュニティと豊富なドキュメントがあります。特に、CodeMirror 5に関する情報が豊富で、問題解決やカスタマイズに役立つリソースが多いです。

@uiw/react-codemirrorの基本的な使用例

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('Editor content:', value);
      }}
    />
  );
};

export default App;

react-codemirror2の基本的な使用例

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('// ここにコードを入力');

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

export default App;