Redux Form Typescript Pass Custom Props
Working solution for @types/redux-form
7.0.10 and redux-form
7.1.2:
Define form component in MyForm.tsx
:
import * as React from "react";import { InjectedFormProps, reduxForm } from 'redux-form';import { connect } from 'react-redux';interface StateProps { valueFromState: string;}interface Props extends StateProps { loading: boolean; // the custom prop}const MyForm: React.StatelessComponent<Props & InjectedFormProps<{}, Props>> = ({handleSubmit, loading}) => ( <form onSubmit={handleSubmit}> {loading && (<p>loading...</p>)} </form>)const mapStateToProps = (state: any): StateProps => ({valueFromState: "1"});export default connect(mapStateToProps)( reduxForm<{}, Props>({ form: 'myform' })(MyForm));
Then use it:
import MyForm from './MyForm';<MyForm onSubmit={() => console.log("submit")} loading />
Here you have an example how to define custom props:
import { FormProps, reduxForm } from "redux-form";interface InitialValuesProps { name: string;}interface CustomFormProps extends FormProps<InitialValuesProps, {}, {}> { loading: boolean;}class CustomForm extends React.Component<CustomFormProps> { render() { const loading = this.props.loading const name = this.props.initialValues.name; }}export default reduxForm({ form: 'myForm' })(CustomForm)