prismicio / prismic-react

React components and hooks to fetch and present Prismic content
https://prismic.io/docs/technologies/homepage-reactjs
Apache License 2.0
153 stars 40 forks source link

Streamline adding class names to `<PrismicRichText>` elements #195

Open angeloashmore opened 9 months ago

angeloashmore commented 9 months ago

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.