Skip to main content

@lexical/react/ReactExtension

Interfaces​

EditorChildrenComponentProps​

Defined in: packages/lexical-react/src/shared/types.ts:11

Properties​

children?​

optional children?: ReactNode

Defined in: packages/lexical-react/src/shared/types.ts:14

contentEditable​

contentEditable: Element | null

Defined in: packages/lexical-react/src/shared/types.ts:13

context​

context: LexicalComposerContextWithEditor

Defined in: packages/lexical-react/src/shared/types.ts:12

ReactConfig​

Defined in: packages/lexical-react/src/shared/types.ts:52

Properties​

contentEditable​

contentEditable: Element | null

Defined in: packages/lexical-react/src/shared/types.ts:60

The default root element of the editor as JSX. Uses <ContentEditable /> from @lexical/react/ContentEditable by default, but may be null or another component.

This component is responsible for calling editor.setRootElement(elem).

decorators​

decorators: readonly DecoratorComponentType[]

Defined in: packages/lexical-react/src/shared/types.ts:80

An array of JSX or components that return JSX that should be rendered as children of Component. These will be merged by array concatenation.

EditorChildrenComponent​

EditorChildrenComponent: EditorChildrenComponentType

Defined in: packages/lexical-react/src/shared/types.ts:74

The component that renders the children of the editor context, by default it is DefaultEditorChildrenComponent which takes the given props and renders them in this order:

  • contentEditable
  • children
ErrorBoundary​

ErrorBoundary: ErrorBoundaryType

Defined in: packages/lexical-react/src/shared/types.ts:65

The ErrorBoundary used for rendering decorators in the editor. By default it is ErrorBoundary from @lexical/react/ErrorBoundary.

ReactOutputs​

Defined in: packages/lexical-react/src/shared/types.ts:83

Properties​

Component​

Component: EditorComponentType

Defined in: packages/lexical-react/src/shared/types.ts:92

The editor component, this can be used by Extensions that depend on this to render the editor such as ReactPluginHostExtension or internally by LexicalExtensionComposer.

All props have defaults based on the config and editor state, but may be overridden.

context​

context: LexicalComposerContextWithEditor

Defined in: packages/lexical-react/src/shared/types.ts:96

This is equivalent to useLexicalComposerContext() from @lexical/react/LexicalComposerContext.

Variables​

ReactExtension​

const ReactExtension: LexicalExtension<ReactConfig, "@lexical/react/React", { Component: (props) => Element; context: LexicalComposerContextWithEditor; }, unknown>

Defined in: packages/lexical-react/src/ReactExtension.tsx:75

An extension to use or configure React for use with Lexical. In an editor, you would typically use LexicalExtensionComposer (for React projects) or ReactPluginHostExtension (to use React Extensions and plug-ins in a non-React project).

See ReactConfig for more detailed exextensionations of how to use the config for this Extension.

For an Extension developer, you can defineConfig() override the extension with decorators to add JSX inside the editor context that is not location-dependent (e.g. floating UI that does not need to be mounted in some specific location, or effects that return null).

Functions​

DefaultEditorChildrenComponent()​

DefaultEditorChildrenComponent(__namedParameters): Element

Defined in: packages/lexical-react/src/ReactExtension.tsx:42

Parameters​

__namedParameters​

EditorChildrenComponentProps

Returns​

Element

Example​

The default EditorChildrenComponent implementation

return (
  <>
    {contentEditable}
    {children}
  </>
);