How to Create a BlockExcerpt Component (React/Gatsby) that Converts Array to Plain Text

4 replies

Last updated: Apr 2, 2020

I’m attempting to create a

&lt;BlockExcerpt&gt;

component (React/Gatsby) that takes the contents of my

_rawBody

field (array type) and output plain text that is limited to ~190 characters. I’m struggling to properly parse the nested arrays and output them with proper spacing. See code in thread.

Apr 2, 2020, 2:34 AM

const BlockExcerpt = ({ blocks }) =&gt; {
  // console.log(blocks)

  const blockText = blocks.map(block =&gt; {
    return block.children.map(blockPart =&gt; {
      return blockPart.text
    })
  });

  const flat = blockText.flat(2)
  const joined = flat.join("")
  const truncated = joined.substring(0,190)
  return &lt;p className={typo.p}&gt;{truncated}&amp;hellip;&lt;/p&gt;
}

export default BlockExcerpt

Apr 2, 2020, 2:34 AM

Since I’m flattening and joining the array, marks have proper spacing but paragraphs have no spacing.
https://d.pr/free/i/2hDkgf

Apr 2, 2020, 2:38 AM

Well I think I just found my answer https://github.com/sanity-io/sanity-recipes/blob/master/snippets/blocksToText.js

Apr 2, 2020, 2:44 AM

This might also be of interest https://www.gatsbyjs.org/packages/gatsby-transform-portable-text/

Apr 2, 2020, 4:27 AM

Sanity.io – build remarkable experiences at scale

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

Get Started Join our Slack

How to Create a BlockExcerpt Component (React/Gatsby) that Converts Array to Plain Text

Sanity.io – build remarkable experiences at scale

Categorized in