REACT CODEMIR

Make the Code-visualization!

This project is generated from npm-template.

react-codemir is a wrapper of codemirror, and i have made some common component-pacakges to easy to use!

Install

$ npm install react-codemir --save or yarn add react-codemir

Quick Start

Here's a quick demostration:

// quick sql codemir demostration
import { HoCodeMir } from 'react-codemir'
import 'codemirror/lib/codemirror.css'
import 'codemirror/mode/sql/sql'
// hint auto complete
import 'codemirror/addon/hint/sql-hint.js'
import 'codemirror/addon/hint/show-hint'
import 'codemirror/addon/hint/show-hint.css'

const sql = 'SELECT * FROM `user`'

function App() {
  return (
    <div className="App">
      <div style={{ width: '800px', margin: 'auto' }}>
        <HoCodeMir
          value={sql}
          mode="edit"
          onBlur={(value: any) => {
            console.log(value)
          }}
          tips={<span>通过 tab 来自动完成</span>}
          clearable
        />
      </div>
    </div>
  )
}