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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions