Anxin.Y

The Front-End Engineer

"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...

Views: 20565

Easy Lazy Loading with React & Intersection Observer API

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

Views: 17245

React-Router: Animated Transitions DIY

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

Views: 9252

Create an Image Magnifier with React

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

Views: 7225

Infinite Scroll with React Hook & Intersection Observer

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

Views: 6478

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-...

Views: 5680

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...

Views: 4983

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...

Views: 4744

Create a Slideshow With React

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

Views: 4720

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...

Views: 2587

Custom React Hook - useIntersection with Intersection Observer

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

Views: 2107

Steps to create a React Typescript library

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

Views: 1268

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...

Views: 1087

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...

Views: 1015

Custom React Hook - useObjectState

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

Views: 497

Simple React Global State Management

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

Views: 92

Tips for AI-Assisted Web Development.

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

Views: 66