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: 21007

Easy Lazy Loading with React & Intersection Observer API

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

Views: 17725

React-Router: Animated Transitions DIY

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

Views: 9990

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: 7844

Infinite Scroll with React Hook & Intersection Observer

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

Views: 6646

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: 6019

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: 5322

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: 5069

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: 5046

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: 2730

Custom React Hook - useIntersection with Intersection Observer

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

Views: 2478

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: 1340

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: 1155

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: 1121

Custom React Hook - useObjectState

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

Views: 507

Simple React Global State Management

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

Views: 102

Tips for AI-Assisted Web Development.

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

Views: 78