Skip to content

Instantly share code, notes, and snippets.

@alfonsodev
Created July 17, 2019 14:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alfonsodev/4fdab8a57bf0be2d9b0da0ae2416a34a to your computer and use it in GitHub Desktop.
Save alfonsodev/4fdab8a57bf0be2d9b0da0ae2416a34a to your computer and use it in GitHub Desktop.
formik-yup-example
import React from 'react';
import { withStyles, WithStyles, createStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
const styles = () =>
createStyles({
root: {
padding: 5,
marginTop: 20,
},
});
function replacer(_: string, value: any) {
// Filtering out properties
if (value instanceof File) {
return {
size: value.size,
name: value.name,
type: value.type,
};
}
return value;
}
interface Props extends WithStyles<typeof styles> {
values: any;
}
const FormValues = ({ values, classes }: Props) => (
<div className={classes.root}>
<Typography variant="h5" component="h5"> State </Typography>
<Typography component="p">{JSON.stringify(values, replacer, 2)}</Typography>
</div>
);
export default withStyles(styles)(FormValues);
import React, { Component } from 'react';
import { connect } from 'react-redux';
import Button from '@material-ui/core/Button';
import { Formik, Field, Form } from 'formik';
import { submitSignUpForm } from '../../actions';
import {
LinearProgress,
withStyles,
Theme,
createStyles
} from '@material-ui/core';
import * as yup from 'yup';
import { TextField } from 'formik-material-ui';
import FormValues from './FormValues';
import { Dispatch, Action, ActionCreator } from 'redux';
const schema = yup.object().shape({
user: yup.object().shape({
email: yup
.string()
.email()
.required(),
}),
password: yup.string().required()
});
const styles = (theme: Theme) =>
createStyles({
container: {
display: 'flex',
flexWrap: 'wrap',
},
textField: {
marginLeft: theme.spacing.unit,
marginRight: theme.spacing.unit,
width: 200,
},
dense: {
marginTop: 19,
},
menu: {
width: 200,
},
});
type SubmitValues = {
user: {
email: string,
},
password: string
}
type Props = {
submitSignUpForm: ActionCreator<Action>
}
class SignUpForm extends Component<Props> {
constructor(props: Props) {
super(props)
this.handleOnSubmit = this.handleOnSubmit.bind(this)
}
async handleOnSubmit(values: SubmitValues, { setSubmitting }: any) {
setSubmitting(true);
this.props.submitSignUpForm(values.user.email, values.password);
}
render() {
return (
<Formik
initialValues={{ user: { email: 'foo@bar.com' }, password: '12345678' }}
validationSchema={schema}
onSubmit={this.handleOnSubmit}
render={({ submitForm, isSubmitting, values }) => (
<Form>
<Field
type="email"
label="Email"
name="user.email"
component={TextField}
/>
<br />
<Field
type="password"
label="Password"
name="password"
component={TextField}
/>
<br />
{isSubmitting && <LinearProgress />}
<br />
<Button
variant="contained"
color="secondary"
disabled={isSubmitting}
onClick={() => {
try {
submitForm()
} catch(error) {
alert(error)
}
}}
>
Sign UP
</Button>
<br />
<FormValues values={values} />
</Form>
)}
/>
);
}
}
const mapDispatchToProps = (dispatch: Dispatch<Action>) => ({
submitSignUpForm: (email: string, password: string) => dispatch(submitSignUpForm({email, password}))
})
export default withStyles(styles)(connect(null, mapDispatchToProps)(SignUpForm));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment