Define prop types for HTML elements e.g. <input> #7644
Description
I want to be able to describe a component, let's call it CustomInput, which just wraps an HTML <input>, providing it with some pre-set attribute values.
I'd like to say that the Props of CustomInput are the set of props expected by the DOM's <input>, plus a couple custom values.
Currently either this isn't possible, or I've missed the docs after reading through Flow docs.
I would expect something like this would be possible:
/** Props expected by HTML <input>.
* @see https://github.com/facebook/flow/blob/422f13bee662472f9d44742edf1cee68b7caee15/lib/dom.js#L3239
*/
type InputHTMLAttributes = React.ElementConfig<typeof HTMLInputElement>;
export type TextFieldProps = {
customProp: string,
} & InputHTMLAttributes;
The error flow (0.90) gives is:
`HTMLInputElement` [1] is incompatible with `React.Component` [2].
CustomInput.js:9:48
9│ type InputHTMLAttributes = React.ElementConfig<typeof HTMLInputElement>;
^^^^^^^^^^^^^^^^^^^^^^^
References:
/private/tmp/flow/flowlib_27edb8b7/dom.js:3051:15
3051│ declare class HTMLInputElement extends HTMLElement {
^^^^^^^^^^^^^^^^ [1]
/private/tmp/flow/flowlib_27edb8b7/react.js:26:15
26│ declare class React$Component<Props, State = void> {
^^^^^^^^^^^^^^^ [2]
Missing/Incorrect APIs
DOM
For example, <input> class is defined here:
Line 3239 in 422f13b
Relevant documentation
If there's a way to do the above using just the HTMLInputElement that'd be great, but otherwise perhaps DOM.js could include the props as their own type? For comparison/info, that appears to be what is available in TypeScript:
There's also an unanswered question about how to do this on Stack Overflow.