https://github.com/angelhtml/react_hook_yup
react hook form with yup example
https://github.com/angelhtml/react_hook_yup
angelcodestyle axios axios-react cors expressjs form javascript jsx nextjs nodejs reacthookform reactjs validation yup yup-validation
Last synced: 3 months ago
JSON representation
react hook form with yup example
- Host: GitHub
- URL: https://github.com/angelhtml/react_hook_yup
- Owner: angelhtml
- Created: 2022-08-11T14:23:43.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-05-29T18:19:36.000Z (about 3 years ago)
- Last Synced: 2026-01-03T14:21:54.523Z (6 months ago)
- Topics: angelcodestyle, axios, axios-react, cors, expressjs, form, javascript, jsx, nextjs, nodejs, reacthookform, reactjs, validation, yup, yup-validation
- Language: JavaScript
- Homepage:
- Size: 9.77 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
React Hook Form
manage your data using with react hook form and yup and send it to your server
đź“ślibraries
- React js or Next js
- React hook form
- yup
- Axios
- Express js
- Cors
in client folder you can see the react hook form and yup tool and axios that can send your data to server
``` javascript
const userSchema = yup.object().shape({
Username: yup.string().required(),
Age: yup.string().required(),
});
const { register:registeruser, handleSubmit:handleSubmituser, formState: { errors:errorsuser }, reset:resetuser } = useForm({
resolver: yupResolver(userSchema),
});
//posting your data from yup to server
const onSubmitHandleruser = (data) => {
axios({
method: 'post',
url: `http://localhost:3001/api/user`,
data: data,
})
.then(function (response) {
setDatas(response.data)
setLoading(true)
//console.log(response)
}).catch(function (error) {
console.log(error);
})
};
```
the server folder is a basic express server that will be available response your requests
``` javascript
app.post("/api/user", (req, res) => {
const username = req.body.Username;
const age = req.body.Age;
res.send({"name" : username, "age" : age})
console.log("data receive")
});
```