0
# @remirror/react
1

2
@remirror/react is a comprehensive React integration library for the Remirror rich text editor toolkit. It provides hooks, components, and utilities for building sophisticated text editing experiences with React, offering features like controlled editor state management, customizable extensions system, and declarative component architecture. The library serves as the primary React interface for the Remirror ecosystem, enabling developers to create cross-platform text editors with TypeScript support and seamless integration with existing React applications.
3

4
## Package Information
5

6
- **Package Name**: @remirror/react
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @remirror/react`
10

11
## Core Imports
12

13
```typescript
14
import { 
15
  Remirror, 
16
  useRemirror, 
17
  useCommands,
18
  ToggleBoldButton,
19
  ReactExtension 
20
} from "@remirror/react";
21
```
22

23
For CommonJS:
24

25
```javascript
26
const { 
27
  Remirror, 
28
  useRemirror, 
29
  useCommands,
30
  ToggleBoldButton,
31
  ReactExtension 
32
} = require("@remirror/react");
33
```
34

35
## Basic Usage
36

37
```typescript
38
import React from 'react';
39
import { 
40
  Remirror, 
41
  useRemirror, 
42
  ReactExtension,
43
  ToggleBoldButton,
44
  ToggleItalicButton,
45
  BaselineButtonGroup 
46
} from '@remirror/react';
47

48
function MyEditor() {
49
  const { manager, state } = useRemirror({
50
    extensions: () => [new ReactExtension()],
51
    content: '<p>Hello <strong>world</strong>!</p>',
52
    selection: 'end',
53
    stringHandler: 'html',
54
  });
55

56
  return (
57
    <div>
58
      <Remirror manager={manager} initialContent={state}>
59
        <BaselineButtonGroup>
60
          <ToggleBoldButton />
61
          <ToggleItalicButton />
62
        </BaselineButtonGroup>
63
      </Remirror>
64
    </div>
65
  );
66
}
67
```
68

69
## Architecture
70

71
@remirror/react is built around several key architectural components:
72

73
- **Core Integration**: React hooks and context providers for managing editor state and lifecycle
74
- **Component System**: Pre-built UI components including buttons, toolbars, and menus for common editor actions
75
- **Extension Framework**: React-specific extensions that integrate with the broader Remirror extension system
76
- **Portal System**: Advanced React portal management for rendering complex node views and floating UI elements
77
- **Table Support**: Specialized React components and extensions for interactive table editing
78
- **Rendering System**: JSON-to-React renderer for displaying editor content as React components
79

80
## Capabilities
81

82
### Core Editor Integration
83

84
Essential hooks and components for integrating Remirror editors with React applications. Provides state management, command access, and the main Remirror component.
85

86
```typescript { .api }
87
function useRemirror<Extension extends AnyExtension>(
88
  props: UseRemirrorProps<Extension>
89
): UseRemirrorReturn<Extension>;
90

91
interface Remirror extends React.Component<RemirrorProps> {}
92
```
93

94
[Core Integration](./core-integration.md)
95

96
### Editor Hooks
97

98
Specialized hooks for accessing editor state, commands, and functionality. Essential for building custom editor interfaces and handling editor events.
99

100
```typescript { .api }
101
function useCommands(): RemirrorCommands;
102
function useChainedCommands(): ChainedFromExtensions<Extensions>;
103
function useHelpers(): RemirrorHelpers;
104
function useEditorState(): EditorState;
105
function useEditorView(): EditorView;
106
```
107

108
[Editor Hooks](./editor-hooks.md)
109

110
### UI Components
111

112
Pre-built React components for common editor functionality including formatting buttons, toolbars, and specialized UI elements.
113

114
```typescript { .api }
115
interface ToggleBoldButton extends React.Component {}
116
interface ToggleItalicButton extends React.Component {}
117
interface BaseToolbar extends React.Component {}
118
interface FloatingToolbar extends React.Component {}
119
```
120

121
[UI Components](./ui-components.md)
122

123
### Advanced Hooks
124

125
Extended hooks for sophisticated editor interactions including positioning, suggestions, keyboard handling, and event management.
126

127
```typescript { .api }
128
function usePositioner(): UsePositionerReturn;
129
function useMention(): MentionState;
130
function useKeymap(keymap: ProsemirrorKeyBindings): void;
131
function useEditorEvent<T>(
132
  event: string,
133
  handler: (params: T) => void
134
): void;
135
```
136

137
[Advanced Hooks](./advanced-hooks.md)
138

139
### React Component Extensions
140

141
Extensions and utilities for integrating React components as ProseMirror node views and managing the portal system.
142

143
```typescript { .api }
144
class ReactComponentExtension extends Extension<ReactComponentOptions> {}
145

146
interface PortalContainer {
147
  render(Component: ComponentType, props?: any): string;
148
  remove(key: string): void;
149
}
150

151
function usePortals(): PortalMap;
152
```
153

154
[Component Extensions](./component-extensions.md)
155

156
### Table Extensions
157

158
React-specific table functionality with interactive components for creating and editing tables within the editor.
159

160
```typescript { .api }
161
class TableExtension extends NodeExtension<TableOptions> {}
162
interface TableComponents extends React.Component {}
163
interface TableCellMenu extends React.Component<TableCellMenuProps> {}
164
```
165

166
[Table Extensions](./table-extensions.md)
167

168
### Content Rendering
169

170
JSON-to-React rendering system for displaying editor content as React components with customizable handlers.
171

172
```typescript { .api }
173
interface RemirrorRenderer extends React.Component<{
174
  json: RemirrorJSON;
175
  typeMap?: Record<string, ComponentType>;
176
}> {}
177

178
interface Doc extends React.Component<{ json: RemirrorJSON }> {}
179
```
180

181
[Content Rendering](./content-rendering.md)
182

183
### Utilities
184

185
React-specific utility functions for element manipulation, type checking, and React component handling.
186

187
```typescript { .api }
188
function isValidElement(element: unknown): element is ReactElement;
189
function getElementProps(element: ReactElement): Record<string, any>;
190
function addKeyToElement(element: ReactElement, key: string): ReactElement;
191
```
192

193
[Utilities](./utilities.md)
194

195
## Types
196

197
### Core Types
198

199
```typescript { .api }
200
interface UseRemirrorProps<Extension extends AnyExtension = AnyExtension> {
201
  extensions: () => Extension[];
202
  content?: RemirrorContentType;
203
  selection?: PrimitiveSelection;
204
  stringHandler?: StringHandler;
205
  onError?: (error: Error) => void;
206
}
207

208
interface UseRemirrorReturn<Extension extends AnyExtension = AnyExtension> {
209
  manager: RemirrorManager<Extension>;
210
  state: EditorState;
211
  getContext: () => FrameworkOutput<Extension>;
212
}
213

214
interface RemirrorProps {
215
  manager: RemirrorManager;
216
  initialContent?: RemirrorContentType;
217
  children?: React.ReactNode;
218
  classNames?: string[];
219
  editable?: boolean;
220
  autoFocus?: boolean | FocusType;
221
}
222
```