Text

How we handle our content

Our Text component, in combination with PortableText, Marks and Renderers, is our flexible and powerful solution to handling any type of text content on our websites.

A few things to note before we dive into the props and how the renderers work:

• All of our Text components are styled <article> tags. Click Useful Tips in the sidebar to learn more. 👉

• All the default styling for things like heading tags, lists and list items ares kept in our text.js token file, which is imported and spread out within $Text.

• You will also notice that there is a single tagStyle variant, the value of which is obtained from the getTypeUtil utility. By default, this will be styled according to the baseType in type.js.

While you can use the Text component with children, like so:

<Text>We are children text!</Text>

the primary thing you will be passing it will be block content from Sanity:

<Text content={blockContent} />

Sanity block content is a little strange - it is a complex object of data that needs to be serialized by various renderers before it can become human-readable.

To get a clearer understanding of what this means, let's hop over to Sanity and see what a block content component looks like to the user:

As expected, the user is able to change many things about the appearance of their content. Options like bold, italic, underline and style are default options, but depending on the client there may also be the option to change the text color or alignment.

Hop back to your code editor and open up the Text/Marks folder.

When a user changes the appearance in Sanity and publishes the document, these changes are added to the object of data that we query for. React will need to know how to handle these special cases and this is where we do it!

At the end of the day, they're just react components that we tell PortableText to use when a particular mark is encountered.

The same is true of all of the files in Text/Renderers, except these instruct PortableText how to handle any particular drop in components that we make available to the user. These options provide a very flexible and rich authoring experience for things like blog posts. These are located in the top-right corner of the block content component.

We add all of the Renderers and Marks to the serializers object of PortableText and then... ✨ MAGIC ✨

<$Text tagStyle={tagStyle} className={className} {...props}>
  {children || <PortableText blocks={content} serializers={{ types: renderers, marks }} />}
</$Text>

• Want to change the text styles? Provide the tagStyle prop and assign it any key found in the fontStyles or fontSizes objects in the type.js file.

• Not every Text component should be rendered as an <article> - proper HTML hierarchy is important. Thanksfully, Stitches gives us access to the as prop, where we can render Text as any HTML element we wish:

<Text as="div" tagStyle="h4" content={blockContent} />