DocsAPI ReferenceFunctionsuseEditor

useEditor

A hook for accessing the EditorApi as part of your React render lifecycle.. The best way to access useEditor is via the createUseEditor() factory.

import { createUseEditor } from "@reacteditor/core";
 
const useEditor = createUseEditor();
 
const Example = () => {
  const type = useEditor((s) => s.selectedItem?.type || "Nothing");
 
  return <h2>{type} selected</h2>;
};

You can also access useEditor as a direct export, but you won’t be able to use selectors, resulting in unwanted re-renders and degraded performance.

Args

ParamExampleType
selector(data)(s: EditorApi) => s.appStateFunction

selector(data)

A selector function that describes what useEditor returns. Receives EditorApi and returns anything. Be as granular as possible to minimize re-renders.

// Good: only re-render when the `selectedItem` changes
const selectedItem = useEditor((s) => s.selectedItem);
 
// Bad: re-render when anything changes
const { selectedItem } = useEditor();
const { selectedItem } = useEditor((s) => s);
 
// Bad: selector creates a new object reference, causing an infinite comparison loop
const { selectedItem } = useEditor((s) => ({ ...s.selectedItem }));

Returns

Whatever is returned by the selector.

useAppuseGetEditor