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