Rich Text Rendering

By default, the kickstartDS RichText component accepts markdown as input. There are many cases where data other than markdown needs to be processed, e.g. if you're working with a CMS.

Sanity

Sanity uses Portable Text to store rich text content. To make it work with the kickstartDS RichText component, we can use the RichTexts renderText render function to convert Sanity Portable Text data to react components.

_15

import { forwardRef } from "react";

_15

import { createProvider } from "@kickstartds/core/lib/utils";

_15

import BlockContent from "@sanity/block-content-to-react";

_15

import {

_15

RichTextContext,

_15

RichTextContextDefault,

_15

} from "@kickstartds/base/lib/rich-text";

_15

_15

const renderPortableText = (text) => <BlockContent blocks={text} />;

_15

_15

const PortableRichText = forwardRef((props, ref) => (

_15

<RichTextContextDefault renderText={renderPortableText} ref={ref} {...props}>

_15

));

_15

_15

export default createProvider(RichTextContext, PortableRichText);