# @lexical/react > This package provides Lexical components and hooks for React applications. Latest version **0.51.0** (published 2026-09-17) · MIT license · 0 weekly downloads ## Install ```sh npm install @lexical/react pnpm add @lexical/react yarn add @lexical/react bun add @lexical/react ``` ## Health **Score 75/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; popular repo. Warnings: low downloads; pre 1.0. ## Facts | | | |---|---| | Version | 0.51.0 | | Published | 2026-09-17 | | First published | 2022-01-10 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM | | Dependencies | 20 | | Unpacked size | 898 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Provenance | attested (GitHub Actions) | | GitHub stars | 23883 | | Maintainers | fantactuka, zurfyx, acywatson, ipavlov001, trueadm, etrepum | | Keywords | react, lexical, editor, rich-text | ## Links - npm: https://www.npmjs.com/package/@lexical/react - Repository: https://github.com/facebook/lexical - npm.io page: https://npm.io/package/@lexical/react ## Dependencies (20) - [lexical](https://npm.io/package/lexical.md) 0.51.0 - [@lexical/yjs](https://npm.io/package/@lexical/yjs.md) 0.51.0 - [@lexical/a11y](https://npm.io/package/@lexical/a11y.md) 0.51.0 - [@lexical/link](https://npm.io/package/@lexical/link.md) 0.51.0 - [@lexical/list](https://npm.io/package/@lexical/list.md) 0.51.0 - [@lexical/mark](https://npm.io/package/@lexical/mark.md) 0.51.0 - [@lexical/text](https://npm.io/package/@lexical/text.md) 0.51.0 - [@lexical/table](https://npm.io/package/@lexical/table.md) 0.51.0 - [@lexical/utils](https://npm.io/package/@lexical/utils.md) 0.51.0 - [@lexical/dragon](https://npm.io/package/@lexical/dragon.md) 0.51.0 - [@lexical/hashtag](https://npm.io/package/@lexical/hashtag.md) 0.51.0 - [@lexical/history](https://npm.io/package/@lexical/history.md) 0.51.0 - [@lexical/internal](https://npm.io/package/@lexical/internal.md) 0.51.0 - [@lexical/markdown](https://npm.io/package/@lexical/markdown.md) 0.51.0 - [@lexical/overflow](https://npm.io/package/@lexical/overflow.md) 0.51.0 - [@floating-ui/react](https://npm.io/package/@floating-ui/react.md) ^0.27.19 - [@lexical/extension](https://npm.io/package/@lexical/extension.md) 0.51.0 - [@lexical/rich-text](https://npm.io/package/@lexical/rich-text.md) 0.51.0 - [@lexical/plain-text](https://npm.io/package/@lexical/plain-text.md) 0.51.0 - [@lexical/devtools-core](https://npm.io/package/@lexical/devtools-core.md) 0.51.0 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 0.51.0 (latest) — 2026-09-17 - 0.51.1-nightly.20260923.0 (nightly) — 2026-09-23 - 0.45.1-dev.0 (dev) — 2026-05-30 - 0.6.1-next.0 (next) — 2022-11-04 - 0.51.1-nightly.20260922.0 — 2026-09-22 - 0.51.1-nightly.20260921.0 — 2026-09-21 - 0.51.1-nightly.20260918.0 — 2026-09-18 - 0.50.1-nightly.20260917.0 — 2026-09-17 - 0.50.1-nightly.20260916.0 — 2026-09-16 - 0.50.1-nightly.20260915.0 — 2026-09-15 - 0.50.1-nightly.20260914.0 — 2026-09-14 - 0.50.1-nightly.20260911.0 — 2026-09-11 - 0.50.1-nightly.20260910.0 — 2026-09-10 - 0.50.1-nightly.20260909.0 — 2026-09-09 - 0.50.1-nightly.20260908.0 — 2026-09-08 - … 689 more at https://npm.io/package/@lexical/react/versions ## README # `@lexical/react` This package provides a set of components and hooks for Lexical that allow for text editing in React applications. ## Getting started Install `lexical` and `@lexical/react`: ``` npm install --save lexical @lexical/react ``` Below is an example of a basic plain text editor using `lexical` and `@lexical/react` ([try it yourself](https://stackblitz.com/github/facebook/lexical/tree/main/examples/react-plain-text?file=src%2FApp.tsx&terminalHeight=0&ctl=1&showSidebar=0&devtoolsheight=0&view=preview)). ```jsx import {$getRoot, $getSelection} from 'lexical'; import {useEffect} from 'react'; import {LexicalComposer} from '@lexical/react/LexicalComposer'; import {PlainTextPlugin} from '@lexical/react/LexicalPlainTextPlugin'; import {ContentEditable} from '@lexical/react/LexicalContentEditable'; import {HistoryPlugin} from '@lexical/react/LexicalHistoryPlugin'; import {OnChangePlugin} from '@lexical/react/LexicalOnChangePlugin'; import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext'; const theme = { // Theme styling goes here ... } // When the editor changes, you can get notified via the // LexicalOnChangePlugin! function onChange(editorState) { editorState.read(() => { // Read the contents of the EditorState here. const root = $getRoot(); const selection = $getSelection(); console.log(root, selection); }); } // Lexical React plugins are React components, which makes them // highly composable. Furthermore, you can lazy load plugins if // desired, so you don't pay the cost for plugins until you // actually use them. function MyCustomAutoFocusPlugin() { const [editor] = useLexicalComposerContext(); useEffect(() => { // Focus the editor when the effect fires! editor.focus(); }, [editor]); return null; } // Catch any errors that occur during Lexical updates and log them // or throw them as needed. If you don't throw them, Lexical will // try to recover gracefully without losing user data. function onError(error) { throw error; } function Editor() { const initialConfig = { namespace: 'MyEditor', theme, onError, }; return ( Enter some text...} /> } /> ); } ``` --- _Source: https://npm.io/package/@lexical/react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._