This series guide + article will be going through examples and concepts of Framer Motion used within React and React Hooks coupled with Styled Components.
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…
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.
As briefly discussed in the intro, The star of the show in optional chaining is the new (?.) operator…
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.
Let’s talk a…
A guide to building your own animated countdown timer with Framer Motion, React, and the use-countdown hook.
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. …
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.
Let’s talk a little about Framer Motion and what it is, Framer Motion provides…
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:
What is TypeScript?
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.
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.
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!
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
PSA: This is my first article that isn’t a coding guide, so any feedback or comments is greatly appreciated.
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.
We are going to be creating two buttons that toggle a feature on or off to demonstrate the following.
Thank you for reading, feel free to clap and provide any feedback you have.
Why add TypeScript to React? I believe we are at the tipping point to where TypeScript is…
Software Engineer with 6+ years of hands-on experience designing, developing, and implementing. Focusing on React + Animations + TypeScript.