Anxin.Y

"I had to create an account to say a very big thank you! A very good article! works like magic!"

"Thanks!!!! This is the easiest answer I was looking for!!!"

"This is by far the simplest most elegant implementation of route animation"

Page Transition Effect in NextJS

This method may not be the best way for NextJS v12+ since new API is provided. Before we start...

Easy Lazy Loading with React & Intersection Observer API

I have updated my implementation of useIntersectionObserver hook, please refer to this post. In...

React-Router: Animated Transitions DIY

This post is based on React Router v5. What's the issue? React Router is a great...

Create an Image Magnifier with React

Today, let's create a simple image magnifier component. First, let's create the basic structure of t...

Infinite Scroll with React Hook & Intersection Observer

In this post, we going to use the useIntersectionObserver hook that I create in...

A simple way to use Web Worker with React-Create-APP - No eject needed

The problem of using Web Worker with an app that start with create-react-app is that: create-react-...

Create a Slideshow With React

Let's create a simple slideshow component today. It's easy and only take few steps to achieve. Here...

A Custom React Hook that handles duplicate API call

Today, we are going to create a custom hook that solve this problem: We have multiple components th...

A Clean Way to Conditionally Render Components

Today, I want to share a clean way to conditionally render child components while using React. It's...

We made a website to easily share links between our devices.

My partner and I made a website to make us easily share links between our...

Custom React Hook - useIntersection with Intersection Observer

This hook is an updated version from my previous Post interface IntersectionHookInit extends...

Steps to create a React Typescript library

Introduction This post will help you to publish your own react library to npm, so you can...

Dynamic Dimension React Container with Transition Effect - Part 1

The Issue Sometimes, we want our container to dynamically fit the size of its content, suc...

Dynamic Dimension React Container with Transition Effect - Part 2, Resize Observer

In part one, we create a dynamic dimension container that can handle child elements with static dimen...

Custom React Hook - useObjectState

A custom hook that make things easier with object state. function useObjectState(defaultValue = {}...

Simple React Global State Management

Hi everyone! I recently created my own solution for managing global state in my web app. It's...

Tips for AI-Assisted Web Development.

In this blog, we will examine how we can utilize the latest machine learning (ML) and artificial...