How to Render Custom Labels

Developing with Prismic
1

I'm having a really hard time finding documentation on this.

I have created a custom label called "reference" for a section of content. The content part has been tagged.

What I'm looking to do is wrap this tagged copy in a component when it's rendering on the front end.

There is documentation that says it will, by default, wrap this in a span (in this case with the class "label") and I see that there's a "components" parameter in --but what I can't find is how I say "If the label is of type 'reference', send the children to {children} instead of wrapping with a span".

I see references to this being a possibility but nowhere in the docs can I find anything showing me how to do this.

2

@dhayes Have a look into HTML Serializer - Prismic

Here's an example of how I have done it:

const htmlSerializer = {
  label: ({ node, key }) => {
    if (node.data.label === 'icon_cross') {
      return (
        <span key={key}>
          <IconXRed />
        </span>
      );
    }

    if (node.data.label === 'icon_check') {
      return (
        <span key={key}>
          <IconTickGreen />
        </span>
      );
    }
  },
};

export default htmlSerializer;
1 Like
3

So, I did see the htmlSerializer as a property of PrismicRichText but my IDE tells me that it's a depricated feature.

This is what I figured out so far:

<PrismicRichText field={slice?.primary?.content} components={{
                        label: (children) => processCustomLabel(children)
                    }} />

function processCustomLabel(data) {
        switch (data.node.data.label.toLowerCase()) {
            case "reference":
                return <Reference uid={data.text} />
        }
    }