Customize the container of portable text with React

7 replies

Last updated: Jan 25, 2021

Hi all! Does anyone know how to remove/customize the container of portable text with React? The react renderer currently wraps the content inside

<p>

, but I’d like to change that. I tried a few things including:

import BlockContent from '@sanity/block-content-to-react'

//                                            vvvvvvvvv
<BlockContent blocks={content} serializers={{ container: 'span' }} />

…but still no dice.

Jan 25, 2021, 9:50 AM

container: ({ children }) => children

Jan 25, 2021, 10:48 AM

Thanks

Paul Welsh

, that didn’t work for me :< Here’s my data + what my code looks like if you’re interested: https://codesandbox.io/s/pedantic-snyder-ftjlp?file=/src/App.js

Jan 25, 2021, 11:08 AM

ah, that’s the default block serialization, not the container you need to be looking at

Jan 25, 2021, 11:25 AM

Thanks Paul, I’ve just realized that as well! I guess now I’ll have to learn how to configure the default block

Jan 25, 2021, 11:29 AM

const serializers = {
  types: {
    block: ({children}) => <>{children}</>
  }
}

Jan 25, 2021, 11:31 AM

sweet, that works! Thanks a ton

Paul Welsh

Jan 25, 2021, 11:31 AM

☝️ obviously very specific to your use case

Jan 25, 2021, 11:32 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for free Explore the demo

Customize the container of portable text with React

Sanity– build remarkable experiences at scale

Was this answer helpful?