An Introduction to Validation in React with Yup

The JavaScript Object Schema Validator and Object Parser to use with React

Ross Bulat
7 min readOct 12, 2018

In this article we will visit why you should be using Yup in your React projects, what it does exactly, and how to make the most out of the package to simplify your code, with examples.

Yup is designed for front-end browser based use. If you are interested in server-side object schema validation with NodeJS, take a look at my article on Joi:

Why should you care about Yup?

Yup makes our lives far easier for validating the data our apps consume and manipulate, in an abstract way that does not interfere with the rest of our business logic.

Web apps built on JavaScript Frameworks are now highly interactive and mutable in and of themselves; that is what the end user has come to expect. With this comes a large amount of data exchange, whether it be from API requests, form submissions, or custom objects to handle our state.

--

--

Ross Bulat

Programmer and Author. @ Parity Technologies, JKRB Investments