Skip to content

Streamline adding class names to <PrismicRichText> elements #195

@angeloashmore

Description

@angeloashmore

Is your feature request related to a problem? Please describe.

<PrismicRichText>'s components prop is often simply used to assign CSS classes to a default element. For example, the following code renders <h1>s with a heading class:

<PrismicRichText
  field={doc.data.richTextField}
  components={{
    heading1: ({ children }) => <h1 className="heading">{children}</h1>
  }}
/>

Except for the className="heading" portion, the code is mostly boilerplate:

heading1: ({ children }) => <h1 className="heading">{children}</h1>

Typing that full line anytime a class needs to be applied can feel tedious.

Describe the solution you'd like

A shortcut or convention for adding classes to default elements would be helpful.

Example:

<PrismicRichText
  field={doc.data.richTextField}
  components={{
    heading1: { className: "heading" }
  }}
/>

(The above example is just an idea and may not be the best or final implementation.)

Describe alternatives you've considered

None.

Additional context

This request was proposed by @a-trost and discussed with @lihbr.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions