React Folder Structure in Five Steps, 2022 Edition — The latest part of Robin’s attempts at updating his well regarded React resources to 2022 standards. Articles about structuring React apps are always popular and this one breaks the idea down into five steps going from the simplest of apps to more complex ones.

Robin Wieruch

React Admin 4.0: An Admin Panel for B2B Applications — A framework for building browser-based ‘admin’ apps on the backend of your choice (REST, GraphQL, etc. or you can write your own adapter). There’s a demo if you want to see it live. MIT licensed, but does have a professional version too if support is required. GitHub repo.

Marmelab

New Sendbird React Chat UIKit SDK — Re-architected from the ground up, UIKit v3 offers modularized, more granular components for devs to build a custom UI fast. The new UIKit makes it faster & easier than ever to integrate chat into your web app.

Sendbird sponsor

Writing Redux Reducers in Rust — The Rust systems programming language is working its way into numerous JavaScript situations and this is a particularly interesting one: using Rust to write complex functions that are compiled down to WASM and used in a React/Redux app.

Arend van Beelen

Using a Hook to Detect Clicks Outside of a Component — When using a dialog or dropdown, you need to detect clicks outside the component so they can be closed when the user navigates away. Here’s a tutorial on how to create the required custom hook.

Robin Wieruch

Custom Hooks Demystified in Five Simple Steps — If you’ve been writing a lot of repetitive code, custom hooks could be the answer, asserts the author. He works through the refactoring process in a series of logical, easy-to-follow steps.

Rahul Suresh

How to Use a Proxy in Next.js — A proxy is used to act as a relay between clients and servers and can be easily implemented in Next.js apps.

Precious Luke

hamburger-react 2.5: Animated 'Hamburger Menu' Icons for React — The icons use CSS-driven transitions optimized for performance, with each one coming in at about 1.5KB. v2.5 adds React 18 support.

Luuk de Vlieger

react-cancelable: Save Time and Resources by Cancelling Outdated Requests — Why generate a lot of excess network traffic for clients which no longer require the requested data? Use this library to simply cancel the request using the AbortController API.

Vladyslav Ohirenko

Unifying Your In-App Toast with Your Inbox Feed

Courier sponsor

react-youtube 8.0: A YouTube Player Component — Acts as a thin layer over the YouTube IFrame Player API.

tjallingt

Next SEO 5.4: Easier SEO for Next.js Projects — Focuses on the essentials for letting search engine spiders index your site properly like titles, meta tags, canonical URLs, through to Open Graph and JSON-LD metadata formats.

Gary Meehan

React Live: A Playground for Live Editing React Components — There are quite a few tools like this now, but React Live has been around for about nine years already. GitHub repo.

Formidable Labs

React DnD 16.0: Utilities to Create Drag and Drop Interfaces — Build complex drag and drop interfaces while keeping your components decoupled. v16 goes ES modules only and adds Node 18 support.

Chris Trevino