Is there an equivalent to React.HTMLProps<...>?

[itmecho]

I'm creating an Input component and I would like to be able to spread any extra standard input props to the input element. In react I could do

interface Props extends React.HTMLProps<HTMLInputElement> {
...
}

// I know I need to use splitProps for this in solid =]
const Input = ({myProp, ...rest}) => {
  ...

  return <input {...rest} />
}

I'm wondering if there's an equivalent in SolidJS to extend the props of a native element

[atk]

Yes, JSX.HTMLAttributes from 'solid-js'.

[itmecho]

Perfect! Thank you

[johnnybenson]

Follow up question: what is the best way to handle narrowing for a given input type?

export const MyRangeInput: Component<JSX.HTMLAttributes<HTMLInputElement>> = (
    props,
) => {
    return (
        <input
            {...props}
            type="range"
            max={props.max}
        />
    );
};

The typing for props here is clearly not specific enough JSX.HTMLAttributes<HTMLInputElement> and it causes issues when passing props to the "extended" range input component.

Hoping to avoid re-typing this stuff manually:

export const MyRangeInput: Component<{ 
    max?: number; 
    min?: number;
} & JSX.HTMLAttributes<HTMLInputElement>> = (
    props,
) => {
    return (
        <input
            {...props}
            type="range"
            max={props.max}
        />
    );
};

---

Update

This seems to work just fine :)

export const MyRangeInput: Component<JSX.InputHTMLAttributes<HTMLInputElement>> = (
    props,
) => {
    return (
        <input
            {...props}
            type="range"
            max={props.max}
        />
    );
};

For what it's worth, this difference feels a bit subtle and unintuitive. I wonder why these behave differently.

JSX.HTMLAttributes<HTMLInputElement>
JSX.InputHTMLAttributes<HTMLInputElement>

[tomahl]

Well the InputHTMLAttributes interface only contains input specific attributes while HTMLAttributes contains common props. InputHTMLAttributes extends the latter.