William Kurniawan
Jul 24, 2020
react-hook-form
in your project directory:yarn add -E react-hook-form
pages
directory, create a new file called login.tsx
. And, write the following code:import React from 'react';
// Modules
import { NextPage } from 'next/types';
const LoginPage: NextPage = () => {
return <div>Login Page</div>;
};
export default LoginPage;
yarn dev
localhost:3000
. You can try to visit localhost:3000/login
and you will see a login page.login.tsx
and import these modules:import Button from '@material-ui/core/Button';
import Container from '@material-ui/core/Container';
import Grid from '@material-ui/core/Grid';
import TextField from '@material-ui/core/TextField';
import { makeStyles } from '@material-ui/core/styles';
login.tsx
and write the following code:// ... imports
const useStyles = makeStyles((theme) => ({
container: {
padding: theme.spacing(3),
},
});
const LoginPage: NextPage = () => {
const classes = useStyles();
return (
<Container className={classes.container} maxWidth="xs">
<div>Login Page</div>
</Container>
);
};
export default LoginPage;
login.tsx
:// ... rest of your codes
const LoginPage: NextPage = () => {
const classes = useStyles();
return (
<Container className={classes.container} maxWidth="xs">
<form>
<Grid container spacing={3}>
<Grid item xs={12}>
<Grid container spacing={2}>
<Grid item xs={12}>
<TextField fullWidth label="Email" name="email" size="small" variant="outlined" />
</Grid>
<Grid item xs={12}>
<TextField
fullWidth
label="Password"
name="password"
size="small"
type="password"
variant="outlined"
/>
</Grid>
</Grid>
</Grid>
<Grid item xs={12}>
<Button color="secondary" fullWidth type="submit" variant="contained">
Log in
</Button>
</Grid>
</Grid>
</form>
</Container>
);
};
// ... rest of your codes
import React from 'react';
// Modules
import { NextPage } from 'next/types';
// MUI Core
import Button from '@material-ui/core/Button';
import Container from '@material-ui/core/Container';
import Grid from '@material-ui/core/Grid';
import TextField from '@material-ui/core/TextField';
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles((theme) => ({
container: {
padding: theme.spacing(3),
},
}));
const LoginPage: NextPage = () => {
const classes = useStyles();
return (
<Container className={classes.container} maxWidth="xs">
<form>
<Grid container spacing={3}>
<Grid item xs={12}>
<Grid container spacing={2}>
<Grid item xs={12}>
<TextField fullWidth label="Email" name="email" size="small" variant="outlined" />
</Grid>
<Grid item xs={12}>
<TextField
fullWidth
label="Password"
name="password"
size="small"
type="password"
variant="outlined"
/>
</Grid>
</Grid>
</Grid>
<Grid item xs={12}>
<Button color="secondary" fullWidth type="submit" variant="contained">
Log in
</Button>
</Grid>
</Grid>
</form>
</Container>
);
};
export default LoginPage;
react-hook-form
. Write the following code in your login.tsx
:import { useForm } from 'react-hook-form';
login.tsx
:// ... rest of your codes
interface FormData {
email: string;
password: string;
}
const useStyles = makeStyles((theme) => ({
container: {
padding: theme.spacing(3),
},
}));
// ... rest of your codes
react-hook-form
in our component:// ... rest of your codes
const LoginPage: NextPage = () => {
const { handleSubmit, register } = useForm<FormData>();
const onSubmit = handleSubmit((data) => {
console.log(data);
});
// ... rest of your codes
};
// ... rest of your codes
<Grid item xs={12}>
<TextField
fullWidth
inputRef={register}
label="Email"
name="email"
size="small"
variant="outlined"
/>
</Grid>
<Grid item xs={12}>
<TextField
fullWidth
inputRef={register}
label="Password"
name="password"
size="small"
type="password"
variant="outlined"
/>
</Grid>
onSubmit
into the onSubmit
props on <form />
component:<form onSubmit={onSubmit}>
{/* ... rest of your codes */}
</form>
import React from 'react';
// Modules
import { NextPage } from 'next/types';
import { useForm } from 'react-hook-form';
// MUI Core
import Button from '@material-ui/core/Button';
import Container from '@material-ui/core/Container';
import Grid from '@material-ui/core/Grid';
import TextField from '@material-ui/core/TextField';
import { makeStyles } from '@material-ui/core/styles';
interface FormData {
email: string;
password: string;
}
const useStyles = makeStyles((theme) => ({
container: {
padding: theme.spacing(3),
},
}));
const LoginPage: NextPage = () => {
const { handleSubmit, register } = useForm<FormData>();
const classes = useStyles();
const onSubmit = handleSubmit((data) => {
console.log(data);
});
return (
<Container className={classes.container} maxWidth="xs">
<form onSubmit={onSubmit}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Grid container spacing={2}>
<Grid item xs={12}>
<TextField
fullWidth
inputRef={register}
label="Email"
name="email"
size="small"
variant="outlined"
/>
</Grid>
<Grid item xs={12}>
<TextField
fullWidth
inputRef={register}
label="Password"
name="password"
size="small"
type="password"
variant="outlined"
/>
</Grid>
</Grid>
</Grid>
<Grid item xs={12}>
<Button color="secondary" fullWidth type="submit" variant="contained">
Log in
</Button>
</Grid>
</Grid>
</form>
</Container>
);
};
export default LoginPage;
Copyright © 2020 William Kurniawan. All rights reserved.