Skip to content

Instantly share code, notes, and snippets.

@iamtmrobinson
Created January 8, 2018 14:49
Show Gist options
  • Save iamtmrobinson/d4bb6e9297300b787891337fe9e07c42 to your computer and use it in GitHub Desktop.
Save iamtmrobinson/d4bb6e9297300b787891337fe9e07c42 to your computer and use it in GitHub Desktop.
Using custom props with a Redux form in Typescript
import * as React from 'react';
import {
Field as FormField,
InjectedFormProps,
reduxForm,
} from 'redux-form';
interface CustomProps {
customText: string;
}
class FormComponent extends React.Component<CustomProps & InjectedFormProps<{}, CustomProps>> {
render() {
const { handleSubmit, customText } = this.props;
return (
<form onSubmit={handleSubmit}>
<div>
<p>{customText}</p>
</div>
</form>
);
}
}
export const Form = reduxForm<{}, CustomProps>({
form: 'form',
})(FormComponent);
@david-cho-lerat-HL2
Copy link

🎉

@hitomim
Copy link

hitomim commented Dec 12, 2018

Thank you!

@lmiller1990
Copy link

excellent!

@duynguye
Copy link

Oh man this is a life saver! Thank you!

@hmatthews26
Copy link

Thank you so much!

@matti-kone
Copy link

awesome!

@billyzduke
Copy link

Yes, thanks tremendously!!! But could someone please explain (or point me toward an external explanation of) WHY this works (and/or why this is the ONLY way it works out of the numerous ones I've been trying)?

I am trying to wrap my head around <CustomProps & InjectedFormProps<{}, CustomProps>> and utterly failing...

@heiwais25
Copy link

Thank you!!!

@DmytroStepanenkoIdelic
Copy link

thank you

@sajadghawami
Copy link

thanks mate! :)

@ibarapascal
Copy link

ibarapascal commented Sep 30, 2019

Thanks a lot!!!

Keyword: InjectedFormProps

Here is another same solution using InjectedFormProps with withStyles in typescript

import {
  Field,
  reduxForm,
} from 'redux-form/immutable';
import { InjectedFormProps } from 'redux-form';

const styles = (theme: Theme) => createStyles({
})

interface Props extends InjectedFormProps, WithStyles<typeof styles> {
}

interface State {
}

class YourComponent extends React.Component<Props, State>{
}

export default reduxForm({
})(withStyles(styles)(YourComponent));

@Jelle-vz
Copy link

Lifesaver!

@VladislavRUS
Copy link

Thanks a lot! Saved my day )

@paulanelo
Copy link

Thank you!!

@sgltkn
Copy link

sgltkn commented Apr 21, 2020

That's awesome. Thanks. :)

@hejiaji
Copy link

hejiaji commented May 8, 2020

Thanks, dude. this should be added into the official document.

@Narven
Copy link

Narven commented Jun 9, 2020

that help me remove another // @ts-ignore
thanks

@kbaklaev
Copy link

dude you're a genius!

@Honka3rd
Copy link

stared!

@Goran7777
Copy link

Goran7777 commented Aug 8, 2021

Thank you buddy,preety hard task.One more star (Y).Cheers.

@ChristopherHButler
Copy link

Has anyone converted this to a functional component?

@myCatPear
Copy link

omg, thx!!

@qTheSky
Copy link

qTheSky commented Oct 4, 2022

thank you very much

@richcarrot
Copy link

This is still paying dividends! Helped me today, thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment