codemirro.js

import React, { useState, useEffect} from 'react'
import { UnControlled as CodeMirror } from 'react-codemirror2'
// import * as cm from "codemirror"
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/neo.css'

if (typeof navigator !== `undefined`) {
  require('codemirror/mode/markdown/markdown')
  require('codemirror/mode/javascript/javascript')
  require('codemirror/mode/jsx/jsx')
  require('codemirror/mode/css/css')
  require('codemirror/addon/edit/matchbrackets')
  require('codemirror/addon/edit/closetag')
  require('codemirror/addon/fold/xml-fold')
}


export default ({ value }) => {
  const [isMount, setMount] = useState(false)
  useEffect(() => setMount(true), [])
  return (
    isMount ? <CodeMirror
    value={value}
    options={{
      mode: 'jsx',
      theme: 'neo',
      lineNumbers: false,
      readOnly: true,
      showCursorWhenSelecting: false,
      cursorHeight: 0,
    }}
  /> : null
  )
}