SolidJS•2y ago

Typescript type for generic html props passthrough?

Looking to create a generic wrapper component that can take arbitrary HTML props (class, etc) without manually defining each prop. The Component type is too generic in this case. Is there a simple way to union the Component type with the generic HTML types? React has the React.HTMLProps option. Is there recommended approach?

5 Replies

HashtagOctothorpOP•2y ago

Example:

export const MyComponent = (props) => (
  <div {...props}>
     <stuff ... />
  </div>
)

export const MyComponent = (props) => (
  <div {...props}>
     <stuff ... />
  </div>
)

The "simple" solution (to get TS to shutup) is a props:any, but I'd really prefer to get type safety passed through. I found the ComponentProps type in the source, but it wasn't clear how to use it. ooh, I think I figured it out?

import {Component, ComponentProps} from 'solid-js'

export const MyComponent: Component<ComponentProps<'div'>> = (props) => (
  <div {...props}>
     <stuff ... />
  </div>
)

import {Component, ComponentProps} from 'solid-js'

export const MyComponent: Component<ComponentProps<'div'>> = (props) => (
  <div {...props}>
     <stuff ... />
  </div>
)

Is that about right?

lxsmnsyc•2y ago

either ComponentProps or JSX.IntrinsicElements

HashtagOctothorpOP•2y ago

like Component<JSX.IntrinsicElements> ?

lxsmnsyc•2y ago

JSX.IntrinsicElements['div']

HashtagOctothorpOP•2y ago

Thanks!

Gaming

Programming

Typescript type for generic html props passthrough?