TutorialsScreencastsCourses
Tutorials

Add Undo Abilities to any Application Easily with Immer and React

React

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.

Read More →

How to use jest-emotion and react-testing-library to Test Emotion Component Styling

Emotion

There are times where an animation can only be achieved by a component always being rendered. This could drive important business logic, however there may not be an easy way to test this when paired with a CSS-in-JS library like Emotion. We'll use jest-emotion to add in new matchers to Jest and combined with react-testing-library we'll be able to test our components are rendering the correct styling.

Creating a Reusable Window Event Listener Hook with useEffect and useCallback

React

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 useEffect and useCallback.

Create the James Bond Introduction in CSS and React

React

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.

Build an Animated Page Indicator using Animated Dynamic Value Tracking in React Native

React Native

In this lesson we'll build an animated page indicator with React Native. We'll use Animated and Animated math functions to create animations that can be used with useNativeDriver. We'll then look at how to use a second Animated.Value and setValue to create dynamically tracked animations.

Animated Input Label with Chrome Autofill Detection in React

React

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.

Build an Animated Page Indicator with Hooks in React

React

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 useState, useEffect and useRef.

Create a Snapping Image Swiper like Instagram with React

React

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.

Create a Segmented Auto-Moving SMS Code Verification Input in React Native

React Native

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.

Create a Segmented Auto-Moving SMS Code Verification Input in React

React

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.

« Previous
1 of 8
Home