1import React from "react";
2import { useForm, Controller } from "react-hook-form";
3import Select from "react-select";
4import Input from "@material-ui/core/Input";
5import { Input as InputField } from "antd";
6
7export default function App() {
8 const { control, handleSubmit } = useForm();
9 const onSubmit = data => console.log(data);
10
11 return (
12 <form onSubmit={handleSubmit(onSubmit)}>
13 <Controller as={Input} name="HelloWorld" control={control} defaultValue="" />
14 <Controller as={InputField} name="AntdInput" control={control} defaultValue="" />
15 <Controller
16 as={Select}
17 name="reactSelect"
18 control={control}
19 onChange={([selected]) => {
20 // React Select return object instead of value for selection
21 return { value: selected };
22 }}
23 defaultValue={{}}
24 />
25
26 <input type="submit" />
27 </form>
28 );
29}
30
1import React, { useState } from "react";
2import Checkbox from "@material-ui/core/Checkbox";
3import Button from "@material-ui/core/Button";
4import TextField from "@material-ui/core/TextField";
5import FormControlLabel from "@material-ui/core/FormControlLabel";
6import Typography from "@material-ui/core/Typography";
7import { makeStyles } from "@material-ui/core/styles";
8import Container from "@material-ui/core/Container";
9import { useForm } from "react-hook-form";
10import Rating from "@material-ui/lab/Rating";
11import StarBorderIcon from '@material-ui/icons/StarBorder';
12
13const useStyles = makeStyles((theme) => ({
14 paper: {
15 marginTop: theme.spacing(8),
16 display: "flex",
17 flexDirection: "column",
18 alignItems: "center"
19 },
20 form: {
21 width: "100%", // Fix IE 11 issue.
22 marginTop: theme.spacing(1)
23 },
24 submit: {
25 margin: theme.spacing(3, 0, 2)
26 }
27}));
28
29export default function Create() {
30 const classes = useStyles();
31 const [rating, setRating] = useState(2);
32 const { register, handleSubmit } = useForm();
33 const onSubmit = (data) => {
34 console.log(data);
35 };
36
37 return (
38 <Container component="main" maxWidth="xs">
39 <div className={classes.paper}>
40 <Typography component="h1" variant="h5">
41 Form
42 </Typography>
43 <form
44 className={classes.form}
45 noValidate
46 onSubmit={handleSubmit(onSubmit)}
47 >
48 <TextField
49 variant="outlined"
50 margin="normal"
51 fullWidth
52 id="title"
53 label="Title"
54 name="title"
55 autoFocus
56 inputRef={register()}
57 />
58 <FormControlLabel
59 control={
60 <Checkbox
61 inputRef={register}
62 name="remember"
63 defaultValue={false}
64 />
65 }
66 label="remember"
67 />
68 <br />
69 <FormControlLabel
70 control={
71 <>
72 <input
73 name="rating"
74 type="number"
75 value={rating}
76 ref={register}
77 hidden
78 readOnly
79 />
80 <Rating
81 name="rating"
82 value={rating}
83 precision={0.5}
84 onChange={(_, value) => {
85 setRating(value);
86 }}
87 icon={<StarBorderIcon fontSize="inherit" />}
88 />
89 </>
90 }
91 label="select rating"
92 />
93 <Button
94 type="submit"
95 fullWidth
96 variant="contained"
97 color="primary"
98 className={classes.submit}
99 >
100 Submit
101 </Button>
102 </form>
103 </div>
104 </Container>
105 );
106}
107
1import React from 'react';
2import { useForm } from 'react-hook-form';
3
4function App() {
5 const { register, handleSubmit, errors } = useForm(); // initialize the hook
6 const onSubmit = (data) => {
7 console.log(data);
8 };
9
10 return (
11 <form onSubmit={handleSubmit(onSubmit)}>
12 <input name="firstname" ref={register} /> {/* register an input */}
13 <input name="lastname" ref={register({ required: true })} />
14 {errors.lastname && 'Last name is required.'}
15 <input name="age" ref={register({ pattern: /\d+/ })} />
16 {errors.age && 'Please enter number for age.'}
17 <input type="submit" />
18 </form>
19 );
20}
1import React from 'react';
2import { useForm } from 'react-hook-form';
3import "./App.css";
4
5type Profile = {
6 firstname: string
7 lastname: string
8 age: number
9}
10
11function App() {
12 const {register, handleSubmit, errors} = useForm<Profile>()
13
14 const onSubmit = handleSubmit((data) => {
15 alert(JSON.stringify(data))
16 })
17
18 return (
19 <main>
20 <form onSubmit={onSubmit}>
21 <div>
22 <label htmlFor="firstname">First Name</label>
23 <input ref={register({ required: true })} id="firstname" name="firstname" type="text"/>
24 {
25 errors.firstname && <div className="error">Enter your name</div>
26 }
27 </div>
28 <div>
29 <label htmlFor="lastname">Last Name</label>
30 <input ref={register({ required: true })} id="lastname" name="lastname" type="text"/>
31 {
32 errors.lastname && <div className="error">Enter your last name</div>
33 }
34 </div>
35 <div>
36 <label htmlFor="age">Age</label>
37 <input ref={register({ required: true })} id="age" name="age" type="text"/>
38 {
39 errors.age && <div className="error">Enter your age</div>
40 }
41 </div>
42 <button type="submit">Save</button>
43 </form>
44 </main>
45 );
46}
47
48export default App;
1import React from 'react';
2import ReactDOM from 'react-dom';
3import { connect } from "react-redux";
4import useForm from 'react-hook-form';
5
6function SampleForm() {
7 const { register, handleSubmit } = useForm();
8 const onSubmit = data => {
9 alert(JSON.stringify(data));
10 };
11
12 return (
13 <div className="App">
14 <form onSubmit={handleSubmit(onSubmit)}>
15 <div>
16 <label htmlFor="firstName">First Name</label>
17 <input name="firstName" placeholder="bill" ref={register} />
18 </div>
19
20 <div>
21 <label htmlFor="lastName">Last Name</label>
22 <input name="lastName" placeholder="luo" ref={register} />
23 </div>
24
25 <div>
26 <label htmlFor="email">Email</label>
27 <input name="email" placeholder="bluebill1049@hotmail.com" type="email" ref={register} />
28 </div>
29 <button type="submit">Submit</button>
30 </form>
31 </div>
32 );
33}
34
35class Sample extends Component {
36 constructor(props) {
37 super(props);
38 }
39
40 render() {
41 return <SampleForm />;
42 }
43}
44
45export default connect()(Sample);
46
47const rootElement = document.getElementById('root');
48ReactDOM.render(<Sample />, rootElement);