@lexical/react NPM

`@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).

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 (
    <LexicalComposer initialConfig={initialConfig}>
      <PlainTextPlugin
        contentEditable={<ContentEditable />}
        placeholder={<div>Enter some text...</div>}
      />
      <OnChangePlugin onChange={onChange} />
      <HistoryPlugin />
      <MyCustomAutoFocusPlugin />
    </LexicalComposer>
  );
}

react lexical editor rich-text

@paiondata/messier-61 @fantufantu/beeeditor lexical-lib-demo messier-61 scribo-markdown urdu-rich-editor lexical-toolbar-verbum @everything-registry/sub-chunk-545 veridical @veridical/components @veridical/plugins hrconnect-ui editor-dsd sykpcomposer sykecomposer2 test-package-deploy-from-organization worroier writly telco-wysiwyg test-sceyt-chat-react-uikit testpkg777 vntrs-editor vc-editor @dossierhq/react-components @drcpythonmfe/lexical-playground @crystallize/design-system @communi/editor @contentmunch/muncher @corbit/rich-text-editor @cpchain-foundation/editor @bunstack/lexical @blocklet/prompt-editor @blocklet/discuss-kit-ux @blocklet/editor @rryando/editor @payloadcms/richtext-lexical @ticketz-oss/mdx-editor kalliope landing-page-builder koenig-lexical-experiment mirpayload regere-icons sceyt-chat-react-uikit-npm test-2-sceyt-chat-react-uikit surveykrui ui-rich-editor test-3-sceyt-chat-react-uikit test-4-sceyt-chat-react-uikit turbovision @amityco/ui-kit @amityco/ui-kit-open-source @amityco/ulta-ui-kit @anthaathi/components @arkitektbedriftene/fe-lib @anjy7/navbar-cms @astroshuttle/ui @attrybtech/attryb-ui @availabs/dms @asset-protocol/react @alkuip/forms @banx9x/react-editor @barscience/global-components @barsnes/lexical-twemoji @blackmann/react-chat-input @betty-blocks/mdxeditor @biblionexus-foundation/platform-editor @biblionexus-foundation/scribe-editor @capytale/capytale-rich-text-editor @brikl/design-dashboard @cc-apps/core @churchapps/apphelper @centreon/ui @21epub-ui/comments @21epub-ui/text-editor 2ani-ui 5htp-core @accelbyte/widgets-v2 @coinvoice/lexical-playground @cmpsr/markdown-editor @bosheski/mdxeditor-editor @datalayer/jupyter-lexical @dcorp/web-editor @denindka/editor-dsd @difizen/ai-flow @did-comment/react @copus/editor verbum verbum-deploy-test verbum-refined urdu-web-editor @firaslatrach/tam_editor_nodes @gtplan/react-components @hestudy/next-editor @huongda-group/lexical-file-manager @igloo-ui/text-editor @fluentui-copilot/react-text-editor @fluentai/react-text-editor @emergence-engineering/lexical-link-preview-plugin @emergence-engineering/lexical-slash-menu-plugin @ksense-tech/components

0.19.1-nightly.20241101.0

7 months ago

0.19.1-nightly.20241031.0

8 months ago

0.19.1-nightly.20241030.0

8 months ago

0.19.1-nightly.20241029.0

8 months ago

0.18.1-nightly.20241028.0

8 months ago

0.19.0

8 months ago

0.18.1-nightly.20241025.0

8 months ago

0.18.1-nightly.20241023.0

8 months ago

0.18.1-nightly.20241024.0

8 months ago

0.18.1-nightly.20241022.0

8 months ago

0.18.1-nightly.20241018.0

8 months ago

0.18.1-nightly.20241017.0

8 months ago

0.18.1-nightly.20241021.0

8 months ago

0.18.1-nightly.20241016.0

8 months ago

0.18.1-nightly.20241015.0

8 months ago

0.18.1-nightly.20241011.0

8 months ago

0.18.1-nightly.20241004.0

8 months ago

0.18.1-nightly.20241008.0

8 months ago

0.18.1-nightly.20241014.0

8 months ago

0.18.1-nightly.20241010.0

8 months ago

0.18.0

9 months ago

0.18.1-nightly.20241003.0

8 months ago

0.18.1-nightly.20241007.0

8 months ago

0.18.1-nightly.20240930.0

9 months ago

0.18.1-nightly.20240927.0

9 months ago

0.18.1-nightly.20241002.0

8 months ago

0.17.2-nightly.20240926.0

9 months ago

0.18.1-nightly.20241009.0

8 months ago

0.18.1-nightly.20241001.0

9 months ago

0.17.2-nightly.20240924.0

9 months ago

0.17.2-nightly.20240925.0

9 months ago

0.17.2-nightly.20240923.0

9 months ago

0.17.2-nightly.20240917.0

9 months ago

0.17.2-nightly.20240920.0

9 months ago

0.17.2-nightly.20240918.0

9 months ago

0.17.2-nightly.20240919.0

9 months ago

0.17.2-nightly.20240916.0

9 months ago

0.17.2-nightly.20240913.0

9 months ago

0.17.2-nightly.20240912.0

9 months ago

0.17.2-nightly.20240910.0

9 months ago

0.17.2-nightly.20240911.0

9 months ago

0.17.2-nightly.20240909.0

9 months ago

0.17.2-nightly.20240905.0

9 months ago

0.17.2-nightly.20240906.0

9 months ago

0.17.2-nightly.20240904.0

9 months ago

0.17.2-nightly.20240903.0

9 months ago

0.17.2-nightly.20240902.0

9 months ago

0.17.2-nightly.20240830.0

10 months ago

0.17.2-nightly.20240829.0

10 months ago

0.17.2-nightly.20240828.0

10 months ago

0.17.1

10 months ago

0.17.2-nightly.20240827.0

10 months ago

0.17.1-nightly.20240819.0

10 months ago

0.16.2-nightly.20240731.0

11 months ago

0.16.2-nightly.20240716.0

11 months ago

0.16.2-nightly.20240712.0

11 months ago

0.16.1-nightly.20240621.0

12 months ago

0.16.2-nightly.20240709.0

11 months ago

0.17.1-nightly.20240822.0

10 months ago

0.17.0

11 months ago

0.17.1-nightly.20240826.0

10 months ago

0.16.1-nightly.20240625.0

12 months ago

0.17.1-nightly.20240807.0

10 months ago

0.16.2-nightly.20240705.0

11 months ago

0.16.2-nightly.20240724.0

11 months ago

0.16.1-nightly.20240610.0

1 year ago

0.16.1-nightly.20240618.0

12 months ago

0.17.1-nightly.20240814.0

10 months ago

0.16.1-nightly.20240614.0

12 months ago

0.16.2-nightly.20240717.0

11 months ago

0.16.1-nightly.20240620.0

12 months ago

0.17.1-nightly.20240802.0

11 months ago

0.17.1-nightly.20240821.0

10 months ago

0.17.1-nightly.20240806.0

10 months ago

0.16.1-nightly.20240628.0

12 months ago

0.16.1-nightly.20240624.0

12 months ago

0.16.2-nightly.20240729.0

11 months ago

0.16.2-nightly.20240725.0

11 months ago

0.16.2-nightly.20240702.0

12 months ago

0.17.1-nightly.20240813.0

10 months ago

0.16.1-nightly.20240613.0

1 year ago

0.16.2-nightly.20240710.0

11 months ago

0.16.2-nightly.20240718.0

11 months ago

0.17.1-nightly.20240820.0

10 months ago

0.17.1-nightly.20240805.0

10 months ago

0.16.1-nightly.20240627.0

12 months ago

0.17.1-nightly.20240809.0

10 months ago

0.16.2-nightly.20240726.0

11 months ago

0.16.2-nightly.20240722.0

11 months ago

0.16.2-nightly.20240703.0

12 months ago

0.16.2-nightly.20240719.0

11 months ago

0.17.1-nightly.20240812.0

10 months ago

0.17.1-nightly.20240816.0

10 months ago

0.16.2-nightly.20240801.0

11 months ago

0.16.1-nightly.20240612.0

1 year ago

0.16.1-nightly.20240619.0

12 months ago

0.16.2-nightly.20240730.0

11 months ago

0.16.2-nightly.20240715.0

11 months ago

0.16.2-nightly.20240711.0

11 months ago

0.16.2-nightly.20240708.0

11 months ago

0.17.1-nightly.20240823.0

10 months ago

0.16.0

1 year ago

0.16.1

12 months ago

0.16.1-nightly.20240626.0

12 months ago

0.17.1-nightly.20240808.0

10 months ago

0.16.2-nightly.20240704.0

11 months ago

0.16.1-nightly.20240701.0

12 months ago

0.16.2-nightly.20240723.0

11 months ago

0.16.1-nightly.20240611.0

1 year ago

0.17.1-nightly.20240815.0

10 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

2 years ago

2 years ago

3 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago