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.
We'll explore how to use Unified, Remark, Rehype, and PrismJS to create markdown code that is capable of being syntax highlighted. The generated code will be React elements instead of a string of HTML. This adds in the security benefits of React when it comes to rendering untrusted markdown content.
Undo capabilities can be complicated to add to any application. We'll dive into how we can use the Immer library to lend us a hand in managing our state and making undo easy.
In this lesson we'll dive into issues with creating class components for reusable logic. Then we'll convert the logic to take advantage of hooks. We'll step through each pitfall that could be encountered and how to solve them. We'll end up with a perfect solution and understanding for how to combine multiple hooks like
In this lesson we'll explore the concept of transitions and animations. We'll create circles that span the width of the screen. Then using transitions create a circle that moves at a linear pace across the screen. Finally using animation and animation delays we'll stagger the appearance and disappearance of each circle.
In this lesson we'll create a label that is centered inside of a text input. We'll look at how to detect Chrome is autofilling the input using CSS animation and CSS pseudo classes. When the input is autofilled, focused, or filled in we show how to animate the label to it's resting place a top the input.
In this lesson we'll build an animated page indicator with React class component. We'll use state, and basic math to setup
transforms to allow for automatic page animations even across multiple page changes. Then we'll convert the class component to take advantage of React hooks including
In this lesson we're going to build an image swiper that works on web and mobile. We'll use a similar technique to Instagram and create a div that hides all overflow and translate an inner container left/right. We'll add in the ability to detect what image the user is looking at and snap to that image.
In this tutorial we're going to build a segmented verification input that will automatically advance while you type. It will be a configurable length and automatically stop when the user has typed the maximum allowed length. We will also take advantage of React controlled inputs to read text changes but never display anything in the input.