Solid JS equivalent of React.HTMLProps<...>

Question

I have a React component with prop types like:

type Props = React.HTMLProps<HTMLAnchorElement> & {
    to?: string;
};

How do you write the equivalent prop types in SolidJS? I tried this:

type Props = Component<HTMLAnchorElement> & {
    to?: string;
};

And it compiles, but it does not have the same built in props as the former such as children.

Did you mean to say "but it does *not* have the same" ? – serg06 Jan 22 '22 at 05:08 — serg06, Jan 22 '22 at 05:08

score 7 · Accepted Answer · answered Jan 23 '22 at 07:55

7

Solid JS has JSX.IntrinsicElements which provides properties types indexed by tag name:

import { JSX } from 'solid-js';

type Props = JSX.IntrinsicElements['a'] & {
    to?: string;
};

answered Jan 23 '22 at 07:55

artem

46,476
8
74
78

Dang, that took a lot of googling to find... – eoleary Feb 12 '23 at 22:14

snnsnn · Answer 2 · 2023-01-25T17:03:30.193

You can use JSX.HTMLAttributes<T>:

interface Props extends JSX.HTMLAttributes<HTMLAnchorElement> {}

This comes in handy when you need extend some element with additional properties like the way we do in React:

export interface Props extends JSX.HTMLAttributes<HTMLInputElement> {
  value: Accessor<string>;
  onInput: JSX.EventHandler<HTMLInputElement, InputEvent>;
  icon?: HTMLImageElement;
  label?: HTMLImageElement,
}

const Input: Component<Props> = (props) => {
  const [_, ...rest] = splitProps(props,  ['icon', 'label']);

  const handleInput: JSX.EventHandlerUnion<HTMLInputElement, InputEvent> = (event) => {}

  return (
    <span class={style.wrapper}>
      {props.icon && props.icon}
      {props.label && props.label}
      <input {...rest} value={props.value()} onInput={handleInput} />
    </span>
  )
};

And for events you have to ways:

 const handleInput: JSX.EventHandler<HTMLInputElement, InputEvent> = (event) => {
  console.log(event.currentTarget.value);
};

const handleInput: JSX.EventHandlerUnion<HTMLInputElement, InputEvent> = (event) => {
  setValue(event.currentTarget.value);
};

Second one works because it as union:

type JSX.EventHandlerUnion<T, E extends Event> = 
  | JSX.EventHandler<T, E>
  | JSX.BoundEventHandler<T, E>;

Solid JS equivalent of React.HTMLProps<...>

2 Answers2