react-portabletext
react-portabletext copied to clipboard
Children prop no longer available in custom block content
Previously with @sanity/block-content-to-react you could use children in your custom blocks component:
import BaseBlockContent from '@sanity/block-content-to-react';
const components = {
types: {
block(props) {
const { children } = props;
return <div>{children}</div>;
}
},
};
function MyPage(props) {
return (
<BaseBlockContent components={components} />
);
}
Now with this package the attribute is no longer available in props. This is the code I'm using to compute it myself as a workaround, which hopefully helps someone else.
import { PortableText } from '@portabletext/react';
import { buildMarksTree } from '@portabletext/toolkit';
const components = {
types: {
block(props) {
const { value, renderNode } = props;
const children = buildMarksTree(value).map((child, i) => (
renderNode({
node: child,
isInline: true,
index: i,
renderNode,
})
));
return <div>{children}</div>;
}
}
};
function MyPage(props) {
return (
<PortableText components={components} />
);
}
Edited for clarity.