Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Streamline adding class names to <PrismicRichText> elements #195

Open
angeloashmore opened this issue Jul 19, 2023 · 0 comments
Open

Streamline adding class names to <PrismicRichText> elements #195

angeloashmore opened this issue Jul 19, 2023 · 0 comments
Labels
enhancement New feature or request

Comments

@angeloashmore
Copy link
Member

angeloashmore commented Jul 19, 2023

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.

@angeloashmore angeloashmore added the enhancement New feature or request label Jul 19, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant