Base Component

The following examples show how to create a base component and how to extend it with custom properties.

Create a base component

Select the component tag you wish by using it's intrinsic tag name. For example rc.div or rc.button. Via the interpolation you are able to pass classnames.

export const CustomButton = rc.button`
  text-blue
  px-3
  py-2
`

Implementation

<CustomButton>Hello World</CustomButton>

// renders:
// <button class="text-blue px-3 py-2">Hello World</button>

Custom Properties

Important: Prefix rc-specific properties with $ to not pass them to the created/extended component and to avoid conflicts with intrinsic properties (rc filters out props prefixed with $)

interface CustomButtonProps {
  $customState?: boolean
}

const CustomButton = rc.button<CustomButtonProps>`
  text-blue
  px-3
  py-2
  ${(p) => (p.$customState ? "bg-black" : "")}
`

Implementation

<CustomButton $customState>Button</CustomButton>

// renders:
// <button class="text-blue px-3 py-2 bg-black">Button</button>

Intrinsic Properties

rc is passing intrinsic properties and you can use them in the interpolation string. For typescript we provide the type of IntrinsicElements to get them properly validated.

interface ButtonProps extends JSX.IntrinsicElements["button"] {
  $customState?: "button"
}

const CustomButton = rc.button<ButtonProps>`
  text-blue 
  custom
  ${(p) => (p.$customState" ? "bg-black" : "")}
  ${(p) => (p.type === "button" ? "opacity-60" : "")}
`

Implementation

<CustomButton type="button" $customState>Button</CustomButton>

// renders:
// <button type="button" class="text-blue custom opacity-60 bg-black"></button>