A way to access stitches component props type?

[julianbenegas]

First of all thanks for this amazing lib, I'm absolutely loving it so far!!

I was thinking of a way of getting the type of the props a stitches component receives, to be able to compose other components on top of it without limiting the typings.

So far, I've been playing around with something like:

const StitchesButton = styled("button", {});
type StitchesButtonProps = React.ComponentProps<typeof StitchesButton>

type Props = { isLoading?: boolean } & StitchesButtonProps

const LoadingButton = ({ isLoading, ...buttonProps }: Props) => (
  <StitchesButton {...buttonProps}>
    {isLoading ? "loading..." : children}
  </StitchesButton>
)

but always get some error (sandbox here).

Anybody have an idea of how to do this?

[peduarte]

I think that's a great idea and the example you provided is a perfect use case. Right now, Im not sure what is the best way to achieve this, but I do agree it's something that need to be able to do.

Will have a think while other people chip in.

[peduarte]

Update:

Latest version will introduce a Stitches.VariantProps type helper that can be used to extract variant props from Stitches Components.

[afzalsayed96]

I actually want this too. @julianbenegas did you get your technique to work by any chance?

[julianbenegas]

Nope 😔

[DaveLo]

This is exactly the use case I was thinking about in my discord question about getting prop types.

Additionally I think it would help in working with dev tools like storybook or typedoc since those infer a lot based on typings. Using stitches with storybook yesterday I had to go in and manually set argTypes in the story because the inferred ones were missing the variants.

[benoitgrelard]

That's the usual as prop forwarding thing, you'd need to wrap it in a utility similar to React.forwardRef to forward the as prop properly with TS. (You should at the very least forward the ref regardless)

I'm not sure how as prop is implemented in stitches, but @jjenzz's currently reworking these things in our primitives so it's kinda related. Perhaps in the longer term we can have one implementation shared across both.

[deebov]

I've used a hack in my own DS to solve this problem. I would basically expose a private type property __props that's used to represent the current props of the component (including the dynamic ones).

It works perfectly except in some rare cases. For example, as cannot be dynamic. Means, if you define a component with button tag name like:

const Button = styled('button', {
   variants: {
      variant: {
         primary: {...}
      }
  }
})

type Props = typeof Button.__props & { customProp:boolean }

const NewButton = (props:Props) => (<Button {...props} />)

// the as prop of `NewButton` prop can only be `button`
// you can use the variant and other dynamic props as you'd use them normally
<NewButton variant="primary" />

I am going to take a closer look at this

[peduarte]

Awesome! Can't wait to see what you'll come up with.

[christianalfoni]

Hi there :)

I believe we can just expose a IStyledComponentProps type, much like I created here:

https://codesandbox.io/s/stitches-ts-issue-forked-0ik04?file=/src/Button.tsx

[julianbenegas]

In that sandbox, it's letting me use any prop without complaining, not just button-specific ones. It can be tweaked to work though, but still it'd be much better if something simpler could be used

[jjenzz]

I would expect to be able to use React.ComponentProps as suggested in the original post. It seems this has been fixed in the latest release https://codesandbox.io/s/stitches-ts-issue-forked-wp7wx

[julianbenegas]

Not quite. I'm not getting typings for button props, only for a couple (css, className, as). Video here.

[jjenzz]

In which case I would say we have a bug in our types somewhere and would suggest raising an issue for that. We should be able to use React.ComponentProps I believe. I don't think we need a new API for this.

[peduarte]

We have a PR proposal here: #264

It essentially works like this. Stitches will expose two types:

• TStyledComponentProps: for the element props inc as prop
• TExtractVariantProps: for variants

Can be used like so:

const Container = styled("div", {
  marginX: "auto",
  paddingX: "$3",

  variants: {
    size: {
      "1": { maxWidth: "300px" },
      "2": { maxWidth: "585px" },
      "3": { maxWidth: "865px" }
    }
  }
});

function PageContainer(props: TStyledComponentProps<typeof Container> & TExtractVariantProps<typeof Container>) {
  return <Container {...props} />;
}

For a better DX, we could also:

// type helper
type StitchesComponent<C> = TStyledComponentProps<C> & TExtractVariantProps<C>;

// usage
function PageContainer(props: StitchesComponent<typeof Container>) {}

[julianbenegas]

Been testing it and it works great! 😌

[graup]

Was this removed again? I can't find it in the code.

[wallynm]

Im using this way, but couldn't find a way to use CSS prop

export type {
  StitchesVariants,  
} from "@stitches/react";

[graup]

@jonathantneal I see you're reworking the types, could we add this to #659 ?. Ideally we could just use React.ComponentProps<typeof Button>, that would by far be the best experience.

[buzinas]

I know this is a bit old, but this is how I'm doing it:

import type { FC, InputHTMLAttributes } from 'react'
import type { $$StyledComponentProps } from '@stitches/react/types/styled-component'
import { styled } from 'stitches'

const StyledInput = styled('input', {
   // ...
})

type InputProps = InputHTMLAttributes<HTMLInputElement> &
  typeof StyledInput[$$StyledComponentProps] & { error: boolean }

const Input: FC<InputProps> = props => {
  // your logic here
  return <StyledInput {...props} />
}

export default Input

[buzinas]

This is SUPER helpful, thanks @jjenzz!

[buzinas]

It seems that as is the only prop not being passed down. Is there a recommended way to proceed? @jjenzz

[jjenzz]

I'm not sure if it's possible to retain polymorphism using the stitches types atm. @jonathantneal do you know of a way it can be achieved?

[jonathantneal]

I’m not entirely certain, but I believe we cannot. For us to reach in and access the component type means we immediately siphon all the connected types and memory consumption of that, which is currently past the threshold of most TS setups, and "boom" goes the TS server. In future versions of TS, perhaps this will be different.

[jjenzz]

We could probably expose some of the types from stitches to help with this but tbh @buzinas, there is already a well-maintained package available for adding polymorphism to your components.

You'd need to do something like:

import type { PolymorphicPropsWithoutRef } from "react-polymorphic-types";

type ButtonOwnProps = { loading?: boolean };

function Button<T extends React.ElementType = "button">(
  props: PolymorphicPropsWithoutRef<ButtonOwnProps, T>
) {
  return <StyledButton {...props} />;
}

https://codesandbox.io/s/bold-euler-73v3f?file=/src/App.tsx:42-506

[jonathantneal]

As of v1.0.0, you can use React.ComponentProps to get the component prop types. This does not include the as prop.

[imjakechapman]

Any examples on the best way to handle the as={} prop with typing?

[Maadtin]

Would like to know too. please

[Simonpedro]

This is my current approach:

const ButtonElem = styled("button", { variants: { red: { true: { color: "red" } } }})

interface ButtonProps extends React.ComponentProps<typeof ButtonElem> {
   as?: React.ElementType
}

export default function Button(props: ButtonProps) {
  // Perhaps you want to do something else in this proxy component.
  return <ButtonElem {...props} />
}

// And then you'd get autocompletion for all the variants and the `as` prop.

<Button red as="label" />

[xaun]

Why not include the as prop?! Wrapping in an FC just for this is annoying :(

[jkhoel]

Hi! I am getting a TypeScript error that seems to indicate that something might be a bit broken?

I expected this to work fine based on the previous working examples:

import * as React from "react";
import { styled, theme } from "@config/stitches.config";

const StyledButton = styled("button", {
   // ...styleconfig
});

export type ButtonProps = React.ComponentProps<typeof StyledButton> & {
  label: string;
};

const Button: React.FC<ButtonProps> = ({ label, ...rest }) => (
  <StyledButton {...rest}>{label}</StyledButton>
);

export default Button;

However, the <StyledButton /> element returned inside of Button will start complaining about Types of property 'css' are incompatible and I need to abstract the StyledButton's props further and Omit css in order to remedy this:

This works:

import * as React from "react";
import { styled, theme } from "@config/stitches.config";

const StyledButton = styled("button", {
  // ...styleconfig
});

type StyleButtonProps = React.ComponentProps<typeof StyledButton>;

export type ButtonProps = Omit<StyleButtonProps, "css"> & {
  label: string;
};

const Button: React.FC<ButtonProps> = ({ label, ...rest }) => (
  <StyledButton {...rest}>{label}</StyledButton>
);

export default Button;

Using "react": "17.0.2", "@stitches/react": "^1.2.1", "typescript": "4.4.3"

[jjenzz]

@jonathantneal I tried to replicate this in a sandbox but the sandbox is struggling to find the typedefs altogether for 1.2.1. Just thought I'd post in case it helps to debug this further https://codesandbox.io/s/determined-star-pxqv2

[gregogun]

@jkhoel are you using stitches with Storybook by any chance?

I've had this exact error pop up whilst using Storybook in my current DS project and I tested the same code on a project without and it worked fine without errors. So it seems to me that Typescript is confusing the css prop from emotion (Storybook uses it under the hood for it's UI I think) with the stitches css prop.

Not sure if that will help with the issue you're having but thought I'd mention it in case it can help in any way!

[coreybruyere]

@gregogun any idea how to fix the Storybook issue?

Also I still get a TS error in my component file when trying to use ComponentProps like so:

import React, { forwardRef, ElementRef, ComponentProps } from 'react';

// -- NOT USING THIS ANYMORE import { VariantProps } from '../../stitches.config';
import { StyledButton, DEFAULT_TAG } from './styles';

export type ButtonProps = ComponentProps<typeof StyledButton>;

export const Button = forwardRef<ElementRef<typeof DEFAULT_TAG>, ButtonProps>(
  (props, ref) => <StyledButton ref={ref} {...props} />
);

This ^ is the error I'm getting in component file AND storybook file

[gregogun]

@coreybruyere yes I've since found a solution in this gist. That solved it for me.

[ovinidev]

This way it worked for me, would it be correct? @peduarte

[jjenzz]

That works. It entirely depends what props you want to accept:

• Stitches.VariantProps - Variant prop types only

  type Variants = Stitches.VariantProps<typeof StitchesButton>;
  /*🔴*/ const props1: Variants = { type: 'submit', variant: 'outline', css: { color: 'red' } }
  /*🟢*/ const props2: Variants = { variant: 'outline' }
  /*🔴*/ const props3: Variants = { css: { color: 'red' } }

• Stitches.CSS - type that is used for css prop

  type CSSProps = { css?: Stitches.CSS<typeof config> };
  /*🔴*/ const props4: CSSProps = { type: 'submit', variant: 'outline', css: { color: 'red' } }
  /*🔴*/ const props5: CSSProps = { variant: 'outline' }
  /*🟢*/ const props6: CSSProps = { css: { color: 'red' } }

• React.ComponentProps - all of the above including DOM props

  type AllProps = React.ComponentProps<typeof StitchesButton>;
  /*🟢*/ const props7: AllProps = { type: 'submit', variant: 'outline', css: { color: 'red' } }
  /*🟢*/ const props8: AllProps = { variant: 'outline' } 
  /*🟢*/ const props9: AllProps = { css: { color: 'red' } }

Here's a playground that demonstrates the above.

[yogiduzit]

Is there a way to access just the variant strings? I am expecting the output to be like:

type Variants = {
    variant?: "outline" | "solid";
}

but am getting this instead

type Variants = {
    variant?: "outline" | "solid" | ({
        "@initial"?: "outline" | "solid" | undefined;
    } & {
        [x: string]: "outline" | "solid" | undefined;
    }) | undefined;
}

[yogiduzit]

Is there a way to access just the variant strings? I am expecting the output to be like:

type Variants = {
    variant?: "outline" | "solid";
}

but am getting this instead

type Variants = {
    variant?: "outline" | "solid" | ({
        "@initial"?: "outline" | "solid" | undefined;
    } & {
        [x: string]: "outline" | "solid" | undefined;
    }) | undefined;
}

Found the answer

export type VariantOptions<
  Component extends { [key: symbol | string]: any },
  VariantName extends keyof VariantProps<Component>
> = Extract<VariantProps<Component>[VariantName], string>;

Using this, you can do

export type ComponentVariants = VariantOptions<typeof StyledComponent>;
// the result will be - "outline" | "solid"

[phiter]

@yogiduzit did you find a way to have this work without needing to pass a variant name? I tried something like this but it didn't work.

Also, boolean props are acting weird I guess. But that comes from VariantProps.

[bel0v]

I think I've found a case when React.ComponentProps is not enough.
I couldn't find a way to satisfy Typescript when trying to use <Button as={ReactRouterLink} to={'/'} />.
A direct use of styled('button') component propagates props just fine, but as soon as I use a wrapper with React.ComponentProps, it doesn't recognise the to prop (although functionally it does work).
https://codesandbox.io/s/young-hill-3wm3vg?file=/src/App.tsx

I guess it also relates to this issue: #427, but I decided to mention it here as that one is closed.

[daviddelusenet]

I'm also running into this issue, did you ever manage to fix it?