block-content-to-react
block-content-to-react copied to clipboard
Unknown props should be passed as attributes to the container, or don't use a container at all
Right now, SanityBlockContent handles the className
attribute, but not, for example handle style
attribute (very common attribute, surprised me className was accepted but not style). It's confusing that in cases of single nodes, <SanityBlockContent>
does not render a container <div>
element, but when multiple nodes it does, and when it does render a container, unknown attributes to <SanityBlockContent>
are not passed along to the container to render them as attributes.
Please do one of the following:
- Just render to a fragment and leave container-handling to the user. This is a breaking change, obviously, altering element nesting significantly.
- Render a container if and with unknown attributes are passed along to
<SanityBlockContent>
. Breaking change in the sense that attributes that were specified but were ignored will no longer be ignored.
There should be an option to render an array of fragments.
I think render an array of fragments is the solution. you can wrap BlockContent in a container if you need to, but if you don't, then an array of fragments is the ideal solution. Specially for us using CSS in JS I now need to target the container instead of the children I'm expecting.
Just ran into this and hopping in here to say this as well!
My use case was targeting all of the child elements with CSS styling - doing a full bleed layout using CSS Grid. But because there is a container div this interrupts my ability to use Grid on all of the child elements easily on the page.
Closing this, as the new @portabletext/react
library is the successor to this module.
Please see https://github.com/portabletext/react-portabletext