title: "@jeeboard/react — React integration" description: Covers the @jeeboard/react package, which provides types and a binding factory that connect an editor core to React. #

@jeeboard/react #

The @jeeboard/react package connects an editor core to a React application. It exports two interfaces and one factory function.

NOTE: The package does not depend on the react npm package. It does not render components. You write the React components in your application.

Key concepts #

• Editor core: the framework-independent editor state object. Its type is EditorCore from @jeeboard/core.
• Binding: a small object that links an editor core to this package. Its type is ReactEditorBinding.
• Host props: the props for a React host component that displays an editor core. Its type is ReactEditorHostProps.

Installation #

Add the package and its peer packages to your application:

pnpm add @jeeboard/react @jeeboard/core react

Create a binding #

Use createReactEditorBinding to create a binding for an editor core.

1. Create an editor core with createEditorCore from @jeeboard/core.
2. Call createReactEditorBinding with the editor core.
3. Keep the binding in a ref or state value that exists for the life of the component.

import { createEditorCore } from "@jeeboard/core";
import { createReactEditorBinding } from "@jeeboard/react";

const editor = createEditorCore();
const binding = createReactEditorBinding(editor);

The function returns an object with two readonly properties:

• packageName: the literal string "@jeeboard/react". Use it to verify the origin of a binding.
• editor: the editor core that you passed to the function.

Host component props #

The ReactEditorHostProps interface describes the props of a host component. A host component is a React component that displays an editor core and forwards user input to it.

The interface has two readonly properties:

• editor (required): the EditorCore instance to display.
• className (optional): a CSS class name for the host element.

Typical usage #

This example shows a host component that renders the elements of an editor core. It subscribes to editor changes and re-renders on each change.

import { useSyncExternalStore } from "react";
import { createEditorCore } from "@jeeboard/core";
import {
  createReactEditorBinding,
  type ReactEditorHostProps,
} from "@jeeboard/react";

const binding = createReactEditorBinding(createEditorCore());

export function EditorHost({ editor, className }: ReactEditorHostProps) {
  const revision = useSyncExternalStore(
    (notify) => editor.subscribe(notify),
    () => editor.revision
  );

  return (
    <div className={className} data-revision={revision}>
      {editor.list().map((element) => (
        <div key={element.id}>{element.type}</div>
      ))}
    </div>
  );
}

export function App() {
  return <EditorHost editor={binding.editor} className="editor" />;
}

NOTE: editor.subscribe accepts a listener that receives a CoreChange value. See core for the full editor core API.

API reference #

See the generated TypeDoc page: react_src.