SolidJS•17mo 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

HashtagOctothorp•17mo 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•17mo ago

either ComponentProps or JSX.IntrinsicElements

HashtagOctothorp•17mo ago

like Component<JSX.IntrinsicElements> ?

lxsmnsyc•17mo ago

JSX.IntrinsicElements['div']

HashtagOctothorp•17mo ago

Thanks!

Gaming

Programming

Typescript type for generic html props passthrough?