In this lesson we'll examine how yup validations are setup. Also we'll show some of the builtin helpers like
min/max for dates. Then using
date-fns we'll setup a custom transform so our validation system can handle different formatted dates.
Testing authentication can be difficult, especially with many 3rd party providers like Auth0. We'll show how to use Jest and mock-jwks to test out your authentication to create fast unit tests with out hacks.
Animations can be used to effectively communicate a users action. However many times the reverse animation is used for both a close, or success. We can do better, and we'll walk through how to use
Animated to create 2 different animations with a single animated value.
position: sticky to lock our sticky header to the content container that it's in when the user scrolls. Using a
useEffect hook we can monitor the scroll position and determine if the user is looking at a section of our content. If they are we can update a
useState hook to highlight it in our nav bar. Finally we'll add a scroll to section feature as well.
We'll build a circular progress button to show how far a user has read an article. The techniques will rely on
stroke-dashoffset. Using the
useLayoutEffect hook and
useRef hook we will measure our article height dynamically and calculate progress based upon the scroll position. We'll show how to dynamically calculate all necessary values to render our progress circle exactly where we want it.