Polymorphism

Last updated: 2.0.0 (22/01/2024)

Polymorphism is a complex subject, and is currently a weak point of Valence's type-checking systems. Dive into this subject at your own risk.

Polymorphism allows select Valence components to take different element form on the DOM, affording the components unique attributes and functionality that are usually disallowed by React or HTML.

Valence has three primary polymorphic components:

Polymorphic Button

Default: button

Polymorphic Layout

Default: div

Polymorphic Text

Default: p

Usage

To use polymorphism on compatible components, simply use the component prop to change the underlying DOM component.

import { Button } from "@valence-ui/core";

function MyComponent() { 
    return ( 
        <Button 
            component="a"
            href="https://isaacshea.com"
        >
            Go to Isaac's website!
        </Button>
    )
}

You may encounter TypeScript errors if you are using unusual props on polymorphic components. If you are sure everything works, simply add a //@ts-ignore to the line above to get TypeScript to calm down.

When can I use this?

Every component that at some point extends the PolymorphicTextProps, PolymorphicButtonProps or PolymorphicLayoutProps will support polymorphism, which generally includes:

• All buttons

• Flex, Grid & all derivative components

• Modal & Sheets

What is the link component?

The component="link" prop sets the underlying element to a react-router-dom-compatible Link component, allowing it to interact with the React Router API.