OverridableComponent

Hvordan bruke OverridableComponent

Flere av designsystemet sine komponenter er implementert med OverridableComponent. Dette er et api som gjør det mulig å lett overstyre hvilken komponent/tag selve komponenten rendres med.

En kjent case for dette er bruk av React.Router sin Link-komponent. Hvis man skulle bruke denne med Designsystemet sin Link-komponent måtte man gjort noe lignende før:

Ved å bruke as-proppen istedenfor løses dette veldig enkelt:

Styled-components

Flere css-in-js bibliotek brukes også en as-prop som overstyrer tag/komponent, noe som kan komplisere ting når man bruker eks styled-components for styling av en komponent fra Designsystemet. Om du har dette problemet i eks emotion eller lignende og har funnet en løsning, ta gjerne kontakt så legger vi det til her.

Når det kommer til en løsning for styled-components kan man bruke forwardedAs istedenfor as på komponentene, Styled-components fikser da resten. Dokumentasjonen om dette finnes her .

Implementasjon

For de spesielt interesserte så ligger implementasjonen på github . Hvis du ser noen forbedringer som kan gjøres, kom gjerne med en PR!