v2 using hooks

I wrote my own implementation of React container for Editor.js, and instead of creating separate package I’d like to volunteer my contributions and help here. Example use case would look like:

import { Editor, useEditorRef } from 'react-editor-js'

const MyComponent = ({ initialData }) => {
  const [ref, { save, loading /* etc. */ }] = useEditorRef()

  const onSave = useCallback(async () => {
    const values = await save()
    console.log(values)
  }, [])

  return (
    <Editor ref={ref} data={initialData} holder="editor-js" /* etc. */>
    { !loading && <button onClick={onSave}>Save</button> }
  )
}

Where useEditorRef is optional and can be replaced with standard useRef. That will allow you to access EditorJS instance with all standard methods at ref.current.

Does this sound like a good idea for this repo?

[hboylan]

Appreciate the example @Jungwoo-An!

Just wanted to add an auto-save version I adapted in case others find this issue.

import EditorJS from '@editorjs/editorjs'
import React, { useCallback, useRef } from 'react'
import EditorJs from 'react-editor-js'

import { EDITOR_JS_TOOLS } from './tools'

export const Editor = () => {
  const editorRef = useRef<EditorJS>()

  const handleChange = useCallback(async () => {
    const data = await editorRef.current?.save()
    if (data) {
      console.log(data)
    }
  }, [])

  return (
    <EditorJs
      tools={EDITOR_JS_TOOLS}
      instanceRef={instance => (editorRef.current = instance)}
      onChange={handleChange}
    />
  )
}

[Jungwoo-An]

@Tymek Hi! First of all, thanks for your interest! 😍

I thought about this proposal, but i think it is not necessary feature. because It can already use with the react hook. (Example)

Thanks!