This series guide + article will be going through examples and concepts of Framer Motion used within React and React Hooks coupled with Styled Components.

Index:

  • Follow Along
  • Overview
  • Animations
  • Transitions
  • Gestures
  • Code Example
  • Copy My Code

Before we start, I wanted to say thank you for taking the time to read my guide + article. I spend a lot of time and effort on these articles and I enjoy providing easy and helpful examples to the community. If you end up loving my article please give it a clap. Or if there is something you would like me to…


How to properly use Optional Chaining and Nullish Coalescing with TypeScript and React

Intro

The problem we are trying to solve: Have you ever had a deeply nested property in an object that any time you time to reference it you got back null because it wasn’t defined quick enough before your code ran? Typically with an API call but not limited to. Depending on how deep the property was you had to write some ugly if statements to prevent the error? Well, that’s what we are going to be solving today with Optional Chaining.

Optional Chaining

As briefly discussed in the intro, The star of the show in optional chaining is the new (?.) operator…


An article on how to create your own scroll progress animation using Framer Motion with React.

Contents

  • Intro
  • Framer Motion
  • Getting Started
  • useViewPortScroll()
  • useSpring()
  • useTransform()
  • Solution

Intro

In this article + guide we will cover all the necessary tools and techniques required to create an animation that tracks the progress of a user's position when scrolling down a webpage on a browser. This will include the current percentage as well as an animated visual representation of the percentage.

If this is your first experience with Framer Motion it’s not required but I recommend going through my article “How to Use Framer Motion with React” first to understand more of the basics. Link at the bottom.

Framer Motion

Let’s talk a…


A guide to building your own animated countdown timer with Framer Motion, React, and the use-countdown hook.

Contents

  • Intro
  • Getting Started
  • useCountdown
  • Animate
  • AnimatePresence
  • Transition
  • Solution

Intro

First off, thank you for taking the time to read this article. I spend a lot of time writing these and it makes it worth it knowing just one person found value in it.

In this article, we are going to cover how to create a timer, animate that timer and celebrate at the end. All with the use of React and a powerful animation library Framer Motion. …


Create a loading spinner with only Framer Motion and React

Contents

  • Intro
  • Framer Motion
  • Motion Components
  • Getting Started
  • Animate
  • Transition
  • Initial
  • Loading State
  • Solution

Intro

In this article + guide we are going to be creating a loading spinner that you can customize in a million different ways. With the help of Framer Motion and React it has never been better.

If this is your first experience with Framer Motion it's not required but I recommend going through my article “How to Use Framer Motion with React” first to understand more of the basics. Link at the bottom.

Framer Motion

Let’s talk a little about Framer Motion and what it is, Framer Motion provides…


Learn how to validate passwords with React Hooks and TypeScript

Contents

  • Intro
  • TypeScript
  • Getting Started
  • Capturing Data
  • Adding Validation
  • Solution

Intro

In this article, I will walk you through my thought process and explain how and why I’m doing things to create a robust password validation with React, React Hooks, and TypeScript.

I will cover the following types of validation:

  • Valid Length
  • Uppercase
  • Lowercase
  • Number
  • Special Character
  • Password Match

TypeScript

What is TypeScript?

TypeScript is JavaScript with added types, classes, and modules. Often described, “TypeScript is like JavaScript but with no surprises.” The TypeScript language offers additional options of type annotations, type checking inside most text editors. Even before compile time.

Why do…


How to get values and update state with React Hooks seamlessly.

Contents

  • Intro
  • Controlled Vs Uncontrolled Inputs
  • Event and Event.Target
  • React Hook useCallback
  • Spread Syntax
  • Solution

Intro

When using React a lot of the time you will need to get data from inputs. Sometimes when the form is rather large it can get a little complicated and frustrating. Let me walk you through this process in depth. We will start with explaining the different types of inputs and how we get data from them, then finish off strong with how we can use React to give it some magic.

Controlled Vs Uncontrolled

It's important that we explain Controlled VS Uncontrolled to understand. For me, this was…


In this guide + article, we will be handling events in React functional components with TypeScript.

Index:

  • onClick
  • onChange
  • onBlur
  • Extra Example

Before we start, I wanted to say thank you for taking the time to read my guide + article. I really enjoy providing easy and helpful examples to the community. If you end up loving my article please give it a clap. Or if there is something you would like me to add please comment. I can’t get better without your feedback. Thanks again!

onClick

What:

An onClick event occurs when a user clicks on an element. For example…


My journey on how writing code articles for medium has made me a better engineer

Index

  • How It All Started
  • Why I Continued
  • How It Made Me Better
  • Key Takeaways

PSA: This is my first article that isn’t a coding guide, so any feedback or comments is greatly appreciated.

How It All Started

I was in the final stretch of a Coding Bootcamp. Working on my last project, a sound sharing app where users could log in and share and comment on the music they created.

I worked tirelessly every night to figure out how I could use Reactjs to upload files to AWS…


In this guide + article we are going to be walking through setting up usage of typescript with Reacts useContext hook with typescript.

Index:

  • Follow Along
  • Quick Start (scroll to bottom)

Follow Along

We are going to be creating two buttons that toggle a feature on or off to demonstrate the following.

  • How to use TypeScript with useContext
  • How to use TypeScript with useReducer
  • Extra shows types with functions and values

Thank you for reading, feel free to clap and provide any feedback you have.

Intro

Why add TypeScript to React? I believe we are at the tipping point to where TypeScript is…

Steven Creates

Software Engineer with 6+ years of hands-on experience designing, developing, and implementing. Focusing on React + Animations + TypeScript.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store