Rendering Portable Text in Sanity CMS

Developer Support
1

Hi is there any simple way to render portable text, I am trying to avoid writing custom component for it? I am using sanity as my CMS and I am using block content as my body, so I need to convert the portable text html to able to show it

2

Hi, yes, you can create a react component that calls a portable text library to render as html

3

It does require a custom react component, but once you have this, you can use it repeatedly

4

Yeah I agree, I was just surprised because it is a very useful component and is very simple

5 
import * as React from 'react';
import { PortableText } from '@portabletext/react'
import type { PortableTextBlock } from '@portabletext/types'

const RichText = ({ values, className }: { values: PortableTextBlock[], className?: string }) => {
  return (
    <div className={className ? className : ''}>
      <PortableText
        value={values}
      />
    </div>
  )
}

export default RichText
6

Here is what I did

7

:100: Nice!