#​275 — February 9, 2022

Read on the Web

React Status
⚛️ Your weekly React news digest, every Wednesday.

Etsy Migrated from React 15.6 to Preact (Instead of React 16) — There’s a full explanation about the decision behind all of this in this document about updating React at Etsy. But Preact, a smaller React alternative with the same API, turned out to be the right choice for them.

Twitter

React — The Missing Parts? — The author works through a thought experiment intended to answer the question as to whether React’s props, state and hooks patterns can be used for non-UI applications: “It’s also a trip to a parallel universe where the React team made different decisions, subject to far less legacy constraints”.

Steven Wittens

Learn the Fundamentals of Rx.js — This useful JavaScript library is great for managing events that happen over time, and in this detailed video course Steve Kinney covers what you need to know to make use of it — including observables, events, intervals, timers, operators, and more.

Frontend Masters sponsor

An Intro to Authentication in React Router 6 — A practical walkthrough of implementing authentication alongside React Router 6 in a bare-bones example app. You can then move on to..

Robin Wieruch

React Router 6 and Private Routes (a.k.a. Protected Routes)
Robin Wieruch

Build Decoupled React Components with Inversion of Control — The Inversion of Control principle is suited to scenarios where you want to isolate functionality for future possible retrofits, such as swapping out one payment provider for another.

César Felipe

Jobs

React Developer at X-Team (Remote) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more.
X-Team

Senior React Engineer @ Nebulab (Remote) — Join our distributed team and build high-volume eCommerce applications in a workplace made by developers for developers.
Nebulab

Say Goodbye to the Office Hello to Freedom — There’s a reason thousands of developers are switching to remote freelance. Join the world’s top talent network and find out why.
Toptal

📅  Remix Conf: Save That Date? — In-person conferences are making a steady comeback: the Remix folks are getting on-board with their event coming up in Salt Lake City, Utah on May 24 and 25, 2022. There’s still time to submit your speaker proposal.

Remix

Using React with D3.js — We felt this fantasticly accessible intro to D3.js deserved more attention than it got last year, so it’s back :-)

Amelia Wattenberger

▶  Trigger a Function When Scrolling to An Element in React with Intersection Observer
Colby Fayock

🛠 Code and Tools

React Components: 15+ Extensive Libraries — It sometimes seems not an issue goes by where we don’t introduce a new component library. It is a useful exercise, therefore, to present a summary of a number of them, including some consideration as to where a given library best fits.

Alex Ivanovs

React Tags 6.8: A Simple Tagging Component — Inspired by Gmail’s “To” field. Supports autocomplete, as well as reordering tags with drag and drop. Sandbox demo here.

Prakhar Srivastav

React Calendar 3.6: The 'Ultimate' Calendar for Your React App — A popular, simple-styled calendar component for React apps, focused mostly on letting users pick dates. GitHub repo.

Wojciech Maj

Free Activity Feeds & Chat APIs for Qualifying Teams

Stream sponsor

react-marksome: Markdown Subset Parser — A full Markdown implementation is not always required: here’s a component that parses a limited subset that may be all that’s really needed.

Miguel Silva

react-d3-speedometer 1.0.2: A Speedometer-Style Gauge for React
Arun Kumar

React Trix RTE: A React Wrapper for the Trix Rich Text Editor
Abhay Nikam

⚡️ Quick Bits:

react-use-websocket — A hook for WebSocket communications, now in its third major release.

react-use-mouse-position (QB) — Track the mouse’s position with this hook.

react-hexgrid — Use React to create this popular strategy / puzzle game element.