Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@strapi/blocks-react-renderer
Advanced tools
Readme
Easily render the content of Strapi's new Blocks rich text editor in your React frontend.
Install the Blocks renderer and its peer dependencies:
yarn add @strapi/blocks-react-renderer react react-dom
npm install @strapi/blocks-react-renderer react react-dom
After fetching your Strapi content, you can use the BlocksRenderer component to render the data from a blocks attribute. Pass the array of blocks coming from your Strapi API to the content
prop:
import { BlocksRenderer, type BlocksContent } from '@strapi/blocks-react-renderer';
// Content should come from your Strapi API
const content: BlocksContent = [
{
type: 'paragraph',
children: [{ type: 'text', text: 'A simple paragraph' }],
},
];
const App = () => {
return <BlocksRenderer content={content} />;
};
You can provide your own React components to the renderer, both for blocks and modifier. They will be merged with the default components, so you can override only the ones you need.
level
)format
)plainText
)image
)url
)To provide your own components, pass an object to the blocks
and modifiers
props of the renderer. For each type, the value should be a React component that will receive the props of the block or modifier. Make sure to always render the children, so that the nested blocks and modifiers are rendered as well.
import { BlocksRenderer } from '@strapi/blocks-react-renderer';
// Content should come from your Strapi API
const content = [
{
type: 'paragraph',
children: [{ type: 'text', text: 'A simple paragraph' }],
},
];
const App = () => {
return (
<BlocksRenderer
content={content}
blocks={{
// You can use the default components to set class names...
paragraph: ({ children }) => <p className="text-neutral900 max-w-prose">{children}</p>,
// ...or point to a design system
heading: ({ children, level }) => {
switch (level) {
case 1:
return <Typography variant="h1">{children}</Typography>
case 2:
return <Typography variant="h2">{children}</Typography>
case 3:
return <Typography variant="h3">{children}</Typography>
case 4:
return <Typography variant="h4">{children}</Typography>
case 5:
return <Typography variant="h5">{children}</Typography>
case 6:
return <Typography variant="h6">{children}</Typography>
default:
return <Typography variant="h1">{children}</Typography>
}
},
// For links, you may want to use the component from your router or framework
link: ({ children, url }) => <Link to={url}>{children}</Link>,
}}
modifiers={{
bold: ({ children }) => <strong>{children}</strong>,
italic: ({ children }) => <span className="italic">{children}</span>,
}}
/>
);
};
FAQs
Easily render the content of Strapi's new Blocks rich text editor in your React frontend.
The npm package @strapi/blocks-react-renderer receives a total of 8,836 weekly downloads. As such, @strapi/blocks-react-renderer popularity was classified as popular.
We found that @strapi/blocks-react-renderer demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 7 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.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.