How to use Sanity Portable Text

In the blog post, we use markdown format to publish the content. In the Sanity Studio, the block editor returns the Portable Text when you query data from the API.

For example, we can write the text as below in the Sanity Studio.

To inspect the raw JSON of the above text, we can click the inspection option as below.

In the inspect option, we can view the Raw JSON as below:

The above RAW JSON is a Portable block content. In the browser, we need to convert block content into HTML content. For that, we can use the npm package as below:

• github.com/sanity-io/block-content-to-react

To install the above npm package, we can execute the below command in the terminal:

npm install --save @sanity/block-content-to-react

The simple solution to render block text into HTML is to simply update the code as below in the singleProduct.js file.

If we visit the browser, the HTML content is rendered as below:

That's all it...

But... we can create a separate React component for the Portable Text. For that, we can create a file at the below location:

• /src/components/portabletext/portableText.js

In the portableText.js, we can write the code as below:

import React from "react"
import clientConfig from "../../../client-config"
import BasePortableText from "@sanity/block-content-to-react"

const PortableText = props => (
  <BasePortableText blocks={props.blocks} {...clientConfig.sanity} />
)

export default PortableText

In the above React component, we need the client credential for the Sanity Studio. For that, we can create the file at the below location (at the root location):

• /client-config.js

In the client-config.js, we can paste the code as below:

module.exports = {
  sanity: {
    projectId: process.env.GATSBY_SANITY_PROJECT_ID || "7p7bxs1s",
    dataset: process.env.GATSBY_SANITY_DATASET || "production",
  },
}

Now, we can update the singleProduct.js as below: