json‐editor for react

JSON Editor 에디터를 react 컴포넌트로 만들어서 사용할 수 있습니다. 에디터를 react 컴포넌트로 감싸서 사용하여 기능을 이용합니다.

component source

json-editor.jsx

import { useEffect, useRef } from 'react'
import JsonEditor from '@redgoose/json-editor'
import '@redgoose/json-editor/css'

let jsonEditor

function JsonEditorComponent(props)
{
  const { src, theme, live, onInit, onUpdate, onContext } = props
  const $jsonEditor = useRef(null)

  function onUpdateEditor({ detail })
  {
    onUpdate(detail)
  }

  function onContextEditor({ detail })
  {
    onContext(detail)
  }

  // mounted
  useEffect(() => {
    jsonEditor = new JsonEditor($jsonEditor.current, {
      theme,
      live,
    })
    $jsonEditor.current.addEventListener('update', onUpdateEditor)
    $jsonEditor.current.addEventListener('context', onContextEditor)
    jsonEditor.replace(src, false)
    onInit(jsonEditor)
    return () => {
      $jsonEditor.current.removeEventListener('update', onUpdateEditor)
      $jsonEditor.current.removeEventListener('context', onContextEditor)
      jsonEditor.destroy()
      $jsonEditor.current.innerHTML = ''
    }
  }, []);

  // change props
  useEffect(() => {
    jsonEditor.options.theme = theme
    jsonEditor.options.live = live
  }, [ theme, live ])

  return (
    <div ref={$jsonEditor}></div>
  )
}

export default JsonEditorComponent

먼저 이렇게 jsx 파일을 작성하여 보관해 둡니다. 이 컴포넌트 파일을 사용하여 에디터로 쓰게 될것입니다.

usage

먼저 패키지를 설치합니다.

npm install @redgoose/json-editor

패키지를 설치한 후에 만들어뒀던 래퍼 react 컴포넌트를 불러와서 사용합니다.

import JsonEditor from './JsonEditor.jsx'

function Demo() {
  return (<JsonEditor/>)
}

props

• src: 데이터 값 (마운트 하는 시점에만 에디터에 적용됩니다!)
• theme: 다크모드에 대한 값
• live: 데이터가 업데이트 될때마다 update이벤트를 실행할지에 대한 여부

method

컴포넌트 소스코드에서 메서드를 추가하여 기능을 확장시키거나 jsonEditor 인스턴스 값으로 에디터를 직접 조작할 수 있습니다.

event

init

에디터 컴포넌트를 시작할때 호출되는 이벤트. 에디터 인스턴스를 가져올 수 있습니다.

function Demo()
{
  function onInitJsonEditor()
  {
    const jsonEditor = instance
  }

  return (<JsonEditor onInit={onInitJsonEditor}/>)
}

update

import { useState } from 'react'

function Demo()
{
  const [ data, setData ] = useState({})

  function onUpdateJsonEditor(src)
  {
    setData(data)
  }

  return (<JsonEditor onUpdate={onUpdateJsonEditor}/>)
}

context

function Demo()
{
  function onContextJsonEditor(e)
  {
    const { body, node, type, isRoot, $ } = e
  }

  return (<JsonEditor onContext={onContextJsonEditor}/>)
}

demo code

마지막으로 테스트로 작성한 컴포넌트를 불러오는 데모와 프로젝트를 남겨둡니다.

import { useState } from 'react'
import JsonEditor from './JsonEditor.jsx'

let jsonEditor

function App()
{
  const [ theme, setTheme ] = useState('light')
  const [ src, setSrc ] = useState({ foo: 'bar' })

  function onInitJsonEditor(instance)
  {
    jsonEditor = instance
  }

  function onUpdateJsonEditor(src)
  {
    setSrc(src)
  }

  function onContextJsonEditor(e)
  {
    const { body, node, type, isRoot, $ } = e
    // console.log('onContextJsonEditor', type)
  }

  function onClickExport()
  {
    const data = jsonEditor.export()
    console.warn('EXPORT =>', data)
  }

  function onClickChangeTheme()
  {
    setTheme(theme === 'dark' ? 'light' : 'dark')
  }

  return (
    <article className="app">
      <header className="header">
        <h1>json-editor for react</h1>
        <p>demo page</p>
      </header>
      <div className="demo">
        <div className={[
          'editor',
          theme === 'dark' && 'editor--dark',
        ].filter(Boolean).join(' ')}>
          <JsonEditor
            src={src}
            theme={theme}
            live={true}
            onInit={onInitJsonEditor}
            onUpdate={onUpdateJsonEditor}
            onContext={onContextJsonEditor}/>
        </div>
        <div className="preview">
          <pre>{JSON.stringify(src, null, 2)}</pre>
        </div>
      </div>
      <nav className="controller">
        <button type="button" onClick={onClickChangeTheme}>
          Change Theme
        </button>
        <button type="button" onClick={onClickExport}>
          Export
        </button>
      </nav>
    </article>
  )
}

export default App

project file

react-demo.zip