A custom React Hook for using CKEditor with SSR particularly with NextJS. https://ckeditor.com | https://nextjs.org

use-ck-editor.js

// A custom React Hook for using CKEditor with SSR 
// particularly with NextJS.
// https://ckeditor.com | https://nextjs.org

import React, { useRef, useState, useEffect } from 'react'

export default function useCKEditor () {
  const editorRef = useRef()
  const [isEditorLoaded, setIsEditorLoaded] = useState(false)
  const { CKEditor, InlineEditor } = editorRef.current || {}

  useEffect(() => {
    editorRef.current = {
      // CKEditor: require('@ckeditor/ckeditor5-react'), // depricated in v3
      CKEditor: require('@ckeditor/ckeditor5-react').CKEditor // v3+
      InlineEditor: require('@ckeditor/ckeditor5-build-inline')
    }
    setIsEditorLoaded(true)
  }, [])

  return Object.freeze({
    isEditorLoaded,
    CKEditor,
    InlineEditor
  })
}

So how do we now use this

getting this error:

Unhandled Runtime Error
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `MyEditor`.

Hey @yelnyaface ... try the updated code above, it seems there was a breaking change in v3.

require is not defined