Skip to content

Instantly share code, notes, and snippets.

@iamtmrobinson

iamtmrobinson/custom-props.tsx

Created January 8, 2018 14:49
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save iamtmrobinson/d4bb6e9297300b787891337fe9e07c42 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save iamtmrobinson/d4bb6e9297300b787891337fe9e07c42 to your computer and use it in GitHub Desktop.
Download ZIP
Using custom props with a Redux form in Typescript
Raw
custom-props.tsx
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);
@ibarapascal
Copy link
Copy Markdown

ibarapascal commented Sep 30, 2019 •
edited
Loading

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
Copy Markdown

Jelle-vz commented Oct 21, 2019

Lifesaver!

@VladislavRUS
Copy link
Copy Markdown

VladislavRUS commented Jan 3, 2020

Thanks a lot! Saved my day )

@paulanelo
Copy link
Copy Markdown

paulanelo commented Jan 16, 2020

Thank you!!

@sgltkn
Copy link
Copy Markdown

sgltkn commented Apr 21, 2020

That's awesome. Thanks. :)

@hejiaji
Copy link
Copy Markdown

hejiaji commented May 8, 2020

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

@Narven
Copy link
Copy Markdown

Narven commented Jun 9, 2020

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

@kbaklaev
Copy link
Copy Markdown

kbaklaev commented Sep 28, 2020

dude you're a genius!

@Honka3rd
Copy link
Copy Markdown

Honka3rd commented Jan 22, 2021

stared!

@Goran7777
Copy link
Copy Markdown

Goran7777 commented Aug 8, 2021 •
edited
Loading

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

@ChristopherHButler
Copy link
Copy Markdown

ChristopherHButler commented Sep 7, 2021

Has anyone converted this to a functional component?

@myCatPear
Copy link
Copy Markdown

myCatPear commented Sep 15, 2022

omg, thx!!

@qTheSky
Copy link
Copy Markdown

qTheSky commented Oct 4, 2022

thank you very much

@richcarrot
Copy link
Copy Markdown

richcarrot commented Sep 29, 2023

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