https://github.com/burdiuz/react-native-codeditor

React Native component to display code editor using WebView and CodeMirror
https://github.com/burdiuz/react-native-codeditor

code codemirror component editor react-native webview

Last synced: 17 days ago
JSON representation

React Native component to display code editor using WebView and CodeMirror

• Host: GitHub
• URL: https://github.com/burdiuz/react-native-codeditor
• Owner: burdiuz
• License: mit
• Created: 2017-10-04T22:00:26.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-02-28T03:38:40.000Z (about 2 years ago)
• Last Synced: 2025-04-20T06:36:05.926Z (25 days ago)
• Topics: code, codemirror, component, editor, react-native, webview
• Language: JavaScript
• Homepage:
• Size: 1.63 MB
• Stars: 31
• Watchers: 2
• Forks: 6
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Native Code Editor

Code Editor based on [Codemirror](https://codemirror.net/).

```javascript

import React, { Component } from 'react';

import CodeEditor from '@actualwave/react-native-codeditor';

export default () => (

   console.log('Initialized!')}

    onHistorySizeUpdate={(size) => console.log('History Size Update:', size)}

    onLog={(content) => console.log('Log:', content)}

    onError={(content) => console.log('Error:', content)}

    onContentUpdate={(content) => console.log('Content Update:', content)}

    theme="darcula"

    settings={{

      gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],

      inputStyle: 'contenteditable',

      styleActiveLine: true,

      mode: 'jsx',

      lineNumbers: true,

      lineWrapping: true,

      foldGutter: true,

      matchBrackets: true,

      autoCloseBrackets: true,

      matchTags: true,

      autoCloseTags: true,

      highlightSelectionMatches: true,

      theme: 'darcula',

    }}

    modules={[

      'addon/fold/foldgutter',

      'mode/javascript/javascript',

      'mode/xml/xml',

      'mode/jsx/jsx',

      // FIXME causes unexpected new lines during editin

      // 'addon/selection/active-line',

      'addon/edit/matchbrackets',

      'addon/edit/matchtags',

      'addon/search/match-highlighter',

      'addon/edit/closebrackets',

      'addon/edit/closetag',

      'addon/fold/foldcode',

      'addon/fold/foldgutter',

      'addon/fold/brace-fold',

      'addon/fold/comment-fold',

      'addon/fold/indent-fold',

      'addon/fold/xml-fold',

    ]}

    content={`import React, { Component, PropTypes } from 'react';

import {

  View,

  Text,

  InputText,

  TouchableHighlight,

  TouchableOpacity,

} from 'react-native';

class ClassComponent extends Component {

  static propTypes = {};

  static defaultProps = {};

  componentWillMount() {

  }

  componentWillReceiveProps(nextProps, nextContext) {

  }

  render() {

    return (

      

    );

  }

}

export default ClassComponent;

`}

  />

);

```