DocsExtending React EditorComposition

Composition

React Editor uses compositional patterns enable completely custom editor interfaces. See an example.

Using composition

Composition can be achieved by providing children to the <Editor> component:

import { Editor } from "@reacteditor/core";
 
export function Editor() {
  return (
    <Editor>
      <div
        style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gridGap: 16 }}
      >
        <div>
          {/* Render the drag-and-drop preview */}
          <Editor.Preview />
        </div>
        <div>
          {/* Render the component list */}
          <Editor.Components />
        </div>
      </div>
    </Editor>
  );
}
Interactive Demo
HeadingBlock
HeadingBlock

Compositional components

React Editor exposes its core components, allowing you to compose them together to create new layouts:

The internal UI for these components can also be changed by implementing UI overrides or theming.

Helper components

React Editor also exposes helper components for even deeper customization:

  • <Drawer> - A reference list of items that can be dragged into a droppable area, normally <Editor.Preview>.
  • <Drawer.Item> - An item that can be dragged from a <Drawer>.
  • <FieldLabel> - A styled label for creating inputs.

Further reading

Overlay PortalsCustom Fields