---
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](../core/index.md) 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:

```bash
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.

```ts
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.

```tsx
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](../core/index.md) for the full editor core API.

## API reference

See the generated TypeDoc page: [react_src](../api/modules/react_src.html).