Render RichText without any p tags

Prismic for Content Creators
1

Hello Prismic!

I would like to render a RichText field with links, italic & bold. However, I don't want to include the surrounding p tag.

I am integrating Prismic to an existing website & design, and this gives me a bit of trouble in terms of styling.

I tried creating a htmlSerializer and exclude the p tag within there, but I couldn't figure it out.

Any hints will be greatly appreciated!

Kris

2

I figured it out, it wasn't too bad - I am just not that experienced in htmlSerializer just yet but I'm learning fast!

For anyone interested

import React from 'react';
import { Elements } from 'prismic-richtext';

// -- Function to add unique key to props
const propsWithUniqueKey = function(props, key) {
  return Object.assign(props || {}, { key });
};

// -- HTML Serializer
// This function will be used to change the way the HTML is loaded
const NoPtag_htmlSerializer = function(type, element, content, children, key) {
  var props = {};

  switch (type) {
    // Add a class to paragraph elements
    case Elements.paragraph:
      return React.createElement('div', propsWithUniqueKey(props, key), children);

    // Return null to stick with the default behavior
    default:
      return null;
  }
};

export default NoPtag_htmlSerializer;
1 Like
3

The prismic-reactjs package has a RichText function that enables you to use RichText.asText(text) or even as a component <RichText render=(text) />!

5

@kris Thanks for sharing your solution!

6

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.