
Product
Introducing Socket Fix for Safe, Automated Dependency Upgrades
Automatically fix and test dependency updates with socket fix—a new CLI tool that turns CVE alerts into safe, automated upgrades.
@zapal/payload-lexical-react
Advanced tools
Payload CMS rich text Lexical editor to React JSX renderer
Designed for Payload CMS RichText Lexical editor. Rendering Lexical to React JSX.
npm i @zapal/payload-lexical-react
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.
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>,
}}
/>;
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}</>;
}}
/>;
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>
),
}}
/>
FAQs
Payload CMS rich text Lexical editor to React JSX renderer
The npm package @zapal/payload-lexical-react receives a total of 44 weekly downloads. As such, @zapal/payload-lexical-react popularity was classified as not popular.
We found that @zapal/payload-lexical-react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
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.
Product
Automatically fix and test dependency updates with socket fix—a new CLI tool that turns CVE alerts into safe, automated upgrades.
Security News
CISA denies CVE funding issues amid backlash over a new CVE foundation formed by board members, raising concerns about transparency and program governance.
Product
We’re excited to announce a powerful new capability in Socket: historical data and enhanced analytics.