How to make extracting components in typescript less cumbersome?

So let's say for example I have a button styling that i'd like to use across most of my app. The recommended tailwind approach is to extract it to a component. However, doing this repeatedly can get quite cumbersome since I have to type every single prop. Is there anyway to infer or automatically create these prop types?

I'm using webstorm and they have a

extract to react component

extract to react component

extract to react component

extract to react component button, but it will just slap a

:any

:any

:any

:any on the props. Has anyone found a way to make the process of doing this more streamlined?

Lopen•7/14/23, 5:29 PM

Have you heard of shadcdn?

Lopen•7/14/23, 5:29 PM

https://ui.shadcn.com/

shadcn/ui

Beautifully designed components built with Radix UI and Tailwind CSS.

Lopen•7/14/23, 5:29 PM

I think this answers your question

Lopen•7/14/23, 5:30 PM

You can get a lot of inspiration from it

Niño•7/14/23, 5:36 PM

Generally you'd only type the props that you need. Say for example creating a NewButtonNewButton component that accepts a label: stringlabel: string and onClick: () => voidonClick: () => void props. and just have that as your props.

There are cases though that you'd want to spread the props of a native html button (or extend a button component from some component library). In VSCode, I would just hover over the component and it'll actually give you type for that component's props which you can just copy and paste. (see image for example)

DylzOP•7/14/23, 5:45 PM

gotcha, thanks guys. I just wish there was a way I could highlight some jsx on my component and click a button and it would spit out a properly typed component based on what i extracted but sounds like that isn't possible

DDylz gotcha, thanks guys. I just wish there was a way I could highlight some jsx on m...

bakdaddy•7/17/23, 8:28 AM

you cound possibly define props like this

//any html element instead of 'div'
type Props = React.ComponentProps<'div'>

//any html element instead of 'div'
type Props = React.ComponentProps<'div'>

just choose an html tag as Element

bakdaddy•7/17/23, 8:29 AM

and then you could customly choose things like this

const Card = ({ children, className, ...props }: DivProps) => {
  return (
    <div className={`card shadow-md border ${className}`} {...props}>
      {children}
    </div>
  );
};

const Card = ({ children, className, ...props }: DivProps) => {
  return (
    <div className={`card shadow-md border ${className}`} {...props}>
      {children}
    </div>
  );
};

bakdaddy•7/17/23, 8:32 AM

so something like

type ButtonProps = React.ComponentProps<'button'>

export const Button = ({className, ...props}: ButtonProps) => {
  return <button className={`p-2 rounded bg-red ${className}`} {...props}></button>
}

type ButtonProps = React.ComponentProps<'button'>

export const Button = ({className, ...props}: ButtonProps) => {
  return <button className={`p-2 rounded bg-red ${className}`} {...props}></button>
}

How to make extracting components in typescript less cumbersome?

Similar Threads

Similar Threads

Similar Threads