H / T
Component

Post Body

This is where most of your content lives, and is the really annoying part to style if you are doing this from scratch. You don't have to worry about any of the following, it's all taken care of out of the box 😀

  • Headers (h1, h2, h3, h4)
  • Ordered and unordered lists (ul, ol)
  • Bold, italic, underlined text (b, i, u)
  • Anchor tags (links - a)
  • Tables (table)
  • Paragraphs (p)
  • Blockquotes
  • Inlined code

Notably missing in the above list are larger components that we also handle like images, videos, code blocks (coming soon), and call-outs. You can learn more about each of those by checking out their documentation pages.

Example usage

We use Contentful, so you'll notice their renderer (documentToReactComponents) below. Make sure to use your vendor's renderer/resolver! See our comprehensive list of headless CMS renderers.

1<HtPostBody>
2  {documentToReactComponents(post.content, overrideOptions)}
3</HtPostBody>

Preview

Props

NameTypeDefaultDescription
children
ReactNode

Often times this is going to wrap a function or component that accepts your rich text / markdown and any additional options, e.g. documentToReactComponents (Contentful), PortableText (Sanity), or ReactMarkdown