Shopify Rich Text Renderer

This package converts the rich text schema returned by Shopify's Storefront API to an HTML string. In particular, this package is useful when dealing with the rich text field type for MetaObjects and Metafields when using the Storefront API.

Usage

• Install yarn add @thebeyondgroup/shopify-rich-text-renderer
• Then import the convertSchemaToHtml() function

import { convertSchemaToHtml } from '@thebeyondgroup/shopify-rich-text-renderer'

/*  this is an example of the rich text Shopify returns
const richTextResponse = {\"type\":\"root\",\"children: [{\"type\":\"heading\"
\"level\":1,\"children\":[{\"type\":\"text\",\"value\":\
"Test Heading\"}]},{\"listType\":\"ordered\",\"type\":\"list\",
\"children\":[{\"type\":\"list-item\",\"children\":..." */

convertSchemaToHtml(richTextResponse)

<!-- Output: -->
<h1>Test Heading</h1>
<ol>
  ...
</ol>
...

To get scoped HTML pass either true or the name of a class(es) to use in your scoped css selectors. This allows for the rich text HTML to be easily styled.

// scoped html
convertSchemaToHtml(richTextResponse, true)

<!-- Output: -->
<div class="rte">
  <h1>Test Heading</h1>
  <ol>
    ...
  </ol>
  ...
</div>

You can also pass in a custom class name to be used as the scoped class instead of the default rte

//scoped w/ custom class name
convertSchemaToHtml(richTextResponse, 'rich-text-wrap')

<!-- Output: -->
<div class="rich-text-wrap">
  <h1>Test Heading</h1>
  <ol>
    ...
  </ol>
  ...
</div>

React/Hydrogen example:

export default RenderedHTML(){
 const richTextResponse  = await getRichTextFromShopify()
  return (
   <>
    <div
        className="html"
        dangerouslySetInnerHTML={{
          __html: convertSchemaToHtml(richTextResponse),
          }}
         />
      <div>
   </>
 )
}

Here is a JSFiddle Demo that shows a working example.