RichText

With RichText you can render a richText-type field from the content schema. It renders the content using storyblok-rich-text-react-renderer, and exports its element types (NODE_PARAGRAPH, etc.) for easy importing.

See here how you can override rendering behavior and render different rich text elements to different React components.

Usage

import { RichText, MARK_BOLD } from "@instantcommerce/sdk";

const BlockComponent = () => {
  const { content } = useBlockState();

  return (
    <div>
      {!!content.description && (
        <RichText
          value={content.description}
          markResolvers={{
            [MARK_BOLD]: (children) => <strong>{children}</strong>,
          }}
        />
      )}
    </div>
  );
};

export default defineBlock({
  component: BlockComponent,
  contentSchema: {
    fields: {
      description: { type: "richText" },
    },
  },
});

Typing

interface RichTextProps extends RenderOptions, HTMLProps<HTMLDivElement> {
  value: any;
}