Typescript support for React HTML element props

[sl33kr]

Hi there,
We are using this library with typescript, and have found an issue trying to add styling to the div that the Field component renders.

The documentation says

The Field component takes in the same props as Control

In typescript this doesn't seem to be the case.

ControlProps extends FieldProps. I would have thought for this to work either the relationship would have to be the other way around, there should be a common interface to both or they use the same interface.

In my case I was able to move forward by modifying the react-redux-form.d.ts file and making FieldProps extend `React.HTMLProps. This meant I was then able to pass down the standard props as I could do with normal javascript to both Field and Control. I do however see how this may not be correct or desirable.

How should I be doing this? I can see that I could use the component property and render the div myself, bit is nice to have react-redux-form do it for me and just pass down my className prop.

[davidkpiano]

@sl33kr I am new to TypeScript (though I'm working on adding more strict TypeScript typings to RRF in future versions). Can you show me the code that doesn't work with the current typings?

[sl33kr]

@davidkpiano I'm new to typescript as well. Here is an example of what I'm trying to do.

<Field model=".customers[0].isNew" className="btn-group" >
	<label className="btn btn-lg btn-primary col-xs-6" id="new-customer-label">
		<input type="radio" id="new-customer-option" value="true" /> New
	</label>
	<label className="btn btn-lg btn-primary col-xs-6" id="existing-customer-label">
		<input type="radio" id="new-customer-option" value="false" /> Existing
	</label>
</Field>

In typescript the className on Field is invalid as FieldProps doesn't extend HTMLProps. Same case for ControlProps. I'm not sure if there is a way to provide these props without either explicitly adding them to FieldProps or making it extend HTMLProps.

I then tried to use the controlProps="{{className: "btn-group"}}" however this wasn't available on Field either.

I ended up rendering the div manually.

<Field model=".customers[0].isNew" component={(props) => {
	return (<div className="btn-group col-xs-12 col-sm-12 col-md-12 col-lg-6">
				{props.children}
			</div>);

[davidkpiano]

cc. @tiagoefmoraes @zach-waggoner would any of you know how to remedy this?

[sl33kr]

I did try to interface merge in our project to add the "extends HTMLProps" to FieldProps and ControlProps to work around the issue but I could get this working either.

[sl33kr]

Ok I got the merge working. Messes with intellisense but at least it compiles.

// react-redux-form.htmlprops.ts
import { FieldProps, ControlProps } from 'react-redux-form';
import { HTMLProps } from 'react';

declare module "react-redux-form" {
    interface FieldProps extends HTMLProps<any> {
    }
}

// form.ts
import { Control, Field } from 'react-redux-form';
import './react-redux-form.htmlprops.ts';

// Some stuff here setting up root form etc.
<Field model=".customers[0].isNew" className="btn-group col-xs-12 col-sm-12 col-md-12 col-lg-6" >
	<label className="btn btn-lg btn-primary col-xs-6" id="new-customer-label">
		<input type="radio" id="new-customer-option" value="true" /> New
	</label>
	<label className="btn btn-lg btn-primary col-xs-6" id="existing-customer-label">
		<input type="radio" id="new-customer-option" value="false" /> Existing
	</label>
</Field>
<Field model=".customers[0].isNew" className="btn-group col-xs-12 col-sm-12 col-md-12 col-lg-6" >
	<label className="btn btn-lg btn-primary col-xs-6" id="new-customer-label">
		<input type="radio" id="new-customer-option" value="true" /> New
	</label>
	<label className="btn btn-lg btn-primary col-xs-6" id="existing-customer-label">
		<input type="radio" id="new-customer-option" value="false" /> Existing
	</label>
</Field>
<div className="col-lg-5">
	<div className="md-form">
		<Control.text model=".customers[0].givenName" id="new-customer-firstname" className="form-control" type="text" />
		<label htmlFor="new-customer-firstname">First name *</label>
	</div>
</div>

[tiagoefmoraes]

As Field and Control pass the properties down it makes sense for them to extend HTMLProps.
Created #557 to solve this.