Pass custom props to Redux Form Field in TypeScript

reactjs typescript react-redux redux-form

After some more experimenting on my side I found a solution to pass custom props:

<Field     name="myName"    props={{        type: 'text'    }}    component={myComponent}    {...{        myCustomProps1: 'myCustomProp1',        myCustomProps2: 'myCustomProp2'    }}/>

In myComponent you have your custom props on the root level of your properties:

const myComponent = (props) => {    return <div>{props.myCustomProp1 + " " props.myCustomProp2}</div>}

reactjs typescript react-redux redux-form

To pass custom props to Field component of Redux Form, you need to declare an interface of all the props you want to pass.

interface YourCustomProps {    myProp1: string;    myProp2: number;}

Now, use GenericField from Redux Form to make Field as YourCustomField to which you will be able to pass YourCustomProps

import { Field, GenericField } from 'redux-form';const YourCustomField = Field as new () => GenericField<YourCustomProps>;

Now you can pass custom props to YourCustomField as declared in the interface.

<YourCustomField    myProp1="Hi"    myProp2={123}    component={MaterialTextField}/>

This way you can pass anything as custom props such as react components as well! :)

reactjs typescript react-redux redux-form

I'm not a Typescript user, so I'm not sure how the type definitions work, but I found this thread about type definitions for Redux-form v6. In the end they link to this repository which is supposed to have (if I understand it correctly) updated type definitions.

I guess an alternative would be to switch to vanilla JS for this specific functionality. Or maybe it would be possible to define a function that takes your custom prop and then returns a component ready to take the Redux form props and merge them.

Edit: I've tried to illustrate the basic idea of the last suggestion, a so-called HOC (Higher Order Component), in the included code below.

const inputWithCustomFields = (customFields) => ComponentToGetExtraFields => (props) => {	const mergedProps = {...props, ...customFields};	return (<ComponentToGetExtraFields {...mergedProps} />);};const ComponentThatNeedsCustomStuff = ({myCustomField1, myCustomField2, ...rest}) => {	console.log('doing stuff with the custom props',myCustomField1, myCustomField2);	return (<div><h1>{myCustomField1 + myCustomField2}</h1><input {...rest} /></div>);}const Parent = () => {  const myCustomFields = {     myCustomField1: "Hello, ",      myCustomField2: "world!",      value: 'can\'t change me',     onChange: () => { /* do nothing */ }   };  const MergedComponent  = inputWithCustomFields(myCustomFields)(ComponentThatNeedsCustomStuff);  return (<div>      <MergedComponent />    </div>);};ReactDOM.render(<Parent />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><div id="root"></div>

Expand snippet