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

user F
, 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

user F

Jan 25, 2021, 11:31 AM

☝️ obviously very specific to your use case

Jan 25, 2021, 11:32 AM

Sanity.io: Get the most out of your content

Sanity.io is a platform to build websites and applications. It comes with great APIs that let you treat content like data. Give your team exactly what they need to edit and publish their content with the customizable Sanity Studio. Get real-time collaboration out of the box. Sanity.io comes with a hosted datastore for JSON documents, query languages like GROQ and GraphQL, CDNs, on-demand asset transformations, presentation agnostic rich text, plugins, and much more.

Don't compromise on developer experience. Join thousands of developers and trusted companies and power your content with Sanity.io. Free to get started, pay-as-you-go on all plans.

Categorized in

Related contributions

Fresco Cooks
- Made with Sanity

Fresco Cooks make software for smart appliances

Go to Fresco Cooks

Figma Config
- Made with Sanity

Website for Config, the global design conference by Figma.

Corey Ward
Go to Figma Config

Why Mums Don't Jump
- Made with Sanity

Podcast website, plus blog and custom player. Built with Gatsby with a custom source plugin for TransistorFM.

Paul Brickles
Go to Why Mums Don't Jump