@uiw/react-codemirror paketi, CodeMirror 6'yı kullanır. Bu sürüm, daha iyi performans, modüler yapı ve geliştirilmiş özelleştirme seçenekleri sunar.

react-codemirror2 paketi, CodeMirror 5'i kullanır. Bu sürüm, olgun ve kararlı bir kod düzenleyici olup, birçok özellik ve eklentiye sahiptir.

@uiw/react-codemirror paketi, CodeMirror 6'nın modüler yapısını kullanarak daha fazla özelleştirme ve tema desteği sunar.

react-codemirror2 paketi, CodeMirror 5'in mevcut özelleştirme özelliklerini ve eklentilerini destekler.

@uiw/react-codemirror paketi, CodeMirror 6'nın daha iyi performans ve bellek yönetimi özelliklerinden yararlanır.

react-codemirror2 paketi, CodeMirror 5'in performansını kullanır, ancak büyük dosyalarla çalışırken bazı sınırlamalar olabilir.

@uiw/react-codemirror paketi, React ile daha iyi entegrasyon için tasarlanmıştır ve React 16.8 ve üzeri sürümleri destekler.

react-codemirror2 paketi, React ile entegrasyon için uygun bir API sunar, ancak daha eski React sürümleriyle de uyumludur.

@uiw/react-codemirror paketi, yeni ve büyüyen bir topluluğa sahiptir, ancak CodeMirror 6'nın daha yeni özellikleri nedeniyle daha az kaynak bulunabilir.

react-codemirror2 paketi, CodeMirror 5 tabanlı olduğu için daha olgun bir topluluğa ve daha fazla kaynak ve eklentiye sahiptir.

CodeMirror 6 ile basit bir kod düzenleyici oluşturma

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

const App = () => {
  return (
    <CodeMirror
      height="200px"
      extensions={[javascript()]}
      onChange={(value) => {
        console.log('Değişen Değer:', value);
      }}
    />
  );
};

export default App;

CodeMirror 5 ile basit bir kod düzenleyici oluşturma

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('// Kodunuzu buraya yazın...');

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

export default App;