🚀 Socket Launch Week 🚀 Day 5: Introducing Socket Fix.Learn More
Socket
Sign inDemoInstall
Socket

@zapal/payload-lexical-react

Package Overview
Dependencies
Maintainers
2
Versions
13
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@zapal/payload-lexical-react

Payload CMS rich text Lexical editor to React JSX renderer

1.8.0
latest
Source
npm
Version published
Weekly downloads
44
-39.73%
Maintainers
2
Weekly downloads
 
Created
Source

Lexical to React JSX made easy

Designed for Payload CMS RichText Lexical editor. Rendering Lexical to React JSX.

Install

npm i @zapal/payload-lexical-react

Basic Usage

import {
  PayloadLexicalReact,
  PayloadLexicalReactProps
} from "@zapal/payload-lexical-react";

const BlogPost = () => {
  const content = await fetchLexicalEditorState();

  return (
    <article>
      <PayloadLexicalReact content={content} />
    </article>
  );
}

Get started by passing your Lexical rich text serialized state to the component. Default setup renders the most basic styles only. P.S.: You can use it with the @tailwindcss/typography package to instantly style your rich text.

Properties

elements

In order to customize the result, use the elements prop to override the default elements rendering behavior:

import { defaultElements, PayloadLexicalReact } from '@zapal/payload-lexical-react';

<PayloadLexicalReact
  content={content}
  elements={{
    ...defaultElements,
    heading: (props) => {
      const Component = props.tag;
      const style = { color: '#f84c0b', backgroundColor: '#000' };

      return <Component style={style}>{props.children}</Component>;
    },
    paragraph: (props) => <p className="custom-paragraph">{props.children}</p>,
  }}
/>;

mark

To customize rendering of text marks like bold, italic etc., add your own mark function:

import { PayloadLexicalReact } from '@zapal/payload-lexical-react';

<PayloadLexicalReact
  content={content}
  mark={(mark) => {
    if (mark.bold) return <strong style={{ fontWeight: 'bold' }}>{mark.text}</strong>;
    if (mark.italic) return <span style={{ fontStyle: 'italic' }}>{mark.text}</span>;
    // Other marks go here if needed

    return <>{mark.text}</>;
  }}
/>;

blocks

Payload CMS Lexical RichText Editor comes with BlocksFeature included. You can render custom blocks like this:

import {
  BlockNode,
  PayloadLexicalReact,
} from "@zapal/payload-lexical-react";

type HorizontalGutter = {
  text: string;
  large?: boolean;
};

 <PayloadLexicalReact<{ horizontalGutter: HorizontalGutter }>
  content={content}
  blocks={{
    horizontalGutter: (props) => (
      <div style={{ padding: props.fields.data.large ? '0 4rem' : '0 1rem' }}>
        {props.fields.data.text}
      </div>
    ),
  }}
/>

Keywords

payload

FAQs

Package last updated on 28 Mar 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts