DocsExtending React EditorInternal React Editor API

Internal React Editor API

React Editor exposes its internal API as EditorApi for extending React Editor with custom functionality within custom fields, compositional interfaces or UI overrides.

Accessing the internal API

You can access EditorApi via two hooks:

  • useEditor - returns EditorApi as part of your component render lifecycle
  • useGetEditor - returns a function to access the latest EditorApi at call time

Within the render lifecycle

To access the API within your render lifecycle, use the useEditor hook. You can use a selector to limit re-rendering to a specific part of the API.

import { createUseEditor } from "@reacteditor/core";
 
const useEditor = createUseEditor();
 
const Example = () => {
  // Use a selector so you only re-render when the selected type changes
  const type = useEditor((s) => s.selectedItem?.type || "Nothing");
 
  return <h2>{type} selected</h2>;
};

See the useEditor docs for a full API reference.

Outside of the render lifecycle

Often it’s not necessary to re-render your component when the EditorApi changes. React Editor provides the useGetEditor hook for accessing the latest EditorApi at call time.

import { useGetEditor } from "@reacteditor/core";
 
const Example = () => {
  const getEditor = useGetEditor();
 
  const handleClick = useCallback(() => {
    // Get the latest EditorApi value
    const { appState } = getEditor();
 
    console.log(appState);
  }, [getEditor]);
 
  return <button onClick={handleClick}>Click me</button>;
};

See the useGetEditor docs for a full API reference.

Usage in practice

Generally, you’ll want to combine this with composition, UI overrides or custom fields.

Here’s an example using the internal API to log the page data as JSON while retaining the standard React Editor UI:

import { Editor, createUseEditor } from "@reacteditor/core";
 
const useEditor = createUseEditor();
 
const JSONLogger = ({ children }) => {
  const appState = useEditor((s) => s.appState);
 
  useEffect(() => {
    console.log(appState);
  }, [appState]);
 
  return <>{children}</>;
};
 
export function Editor() {
  return (
    // Render the React Editor context
    <Editor>
      <JSONLogger>
        {/* Since we're overriding React Editor's children, we restore the standard React Editor UI */}
        <Editor.Layout />
      </JSONLogger>
    </Editor>
  );
}

Further reading

Field TransformsOverview