What’s the best pattern to centralize all fields like PrismicLink into a single UI component?

Developing with Prismic
1

I have PrismicLink scattered across the app. I’d like to wrap it (e.g., UiLink) and pass Prismic fields/props through, but still control variants (primary/secondary/neutral) globally.

My question is that if I use custom component to wrap the links UiLink, for example, and decide to change the border or bg I still have to go and check every instance of my app that references to this component and change the color. If the primary variant is now rounded, I have to go to every primary variant that has changed. What’s a work for this?

2

Hey Luis!

PrismicLink already has support for variants! In your page type you can put options (Primary, Secondary, etc) and then when you render you just apply the classes depending on the variant. Then later, if you change how a variant looks you only change it one time and all the links with that variant will update.

Here’s the example with Svelte:

<PrismicLink
  field={slice.primary.button}
  class={[
    "button",
    {
      primary: slice.primary.button.variant === "Primary",
      secondary: slice.primary.button.variant === "Secondary",
    },
  ]}
/>

and another one for Nuxt:

<PrismicLink
  :field="slice.primary.button"
  class="button"
  :class="{
    primary: slice.primary.button.variant === 'Primary',
    secondary: slice.primary.button.variant === 'Secondary',
  }"
/>