Redux Form Typescript Pass Custom Props Redux Form Typescript Pass Custom Props typescript typescript

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)