#​333 — April 5, 2023

Read on the Web

Together with  Marmelab
React Status

React Chrono 2: A Flexible Timeline Component — A complete overhaul of a popular component. You can render themeable timelines in vertical, horizontal, or vertical alternating orientations. It includes keyboard navigation support, auto advancement, and, as of v2, support for nested timelines. Docs or give it a try via some CodeSandbox examples.

Prabhu Murthy

▶  Dan Abramov Explores React Server Components — Clocking in at a rather epic almost four hours, this (well timestamped) video isn’t for the faint of heart, but Dan and Ben walk through everything React Server Components oriented, complete with diagrams, code, and a real-world app.

Ben Holmes

The Open-Source Framework for B2B Apps — From simple dashboards to complex admin panels for your entire company, react-admin unleashes the true productivity of React. Join more than 20k devs already building web apps like they play Lego, thanks to 230+ business-oriented components.

Marmelab/React-admin sponsor

Learn React as Library or Learn React as a Framework? — Learning React in 2023 isn’t quite as easy as it used to be. The answer is best summarized as the ever helpful “it depends”. Robin does suggest a way forward, though.

Robin Wieruch

Making Tanstack Tables a Thousand Times Faster with a One Line Change — However there was a lot of work required, which the author meticulously explains, to get to that one troublesome line of code.

JP Camara

IN BRIEF:

Using tRPC in Astro and Its (React) Islands — tRPC gives end-to-end type safety when working with APIs and this guide shows how to implement it in Astro on the server side and on the client-side using React.

Thomas Ledoux

▶  Creating a GitHub Globe Clone with Three.js — If you’re logged in to GitHub, you might not have seen the ‘globe’ on its homepage. Now, though, you can create your own.

Epic Programmer

React Hook Form: Working with Multipart Form Data and File Uploads
Alex Khomenko

🛠 Code and Tools

React-Clock: An Analog Clock Component — There’s a beautiful train station style example to see here, but you can ultimately customize the clock to your liking. From the same creator as React Calendar.

Wojciech Maj

Dynaboard: A Visual Web App IDE Made for Developers — Build high performance public and private web applications in a collaborative — full-stack — development environment.

Dynaboard sponsor

React Virtuoso 4.2: Components for Rendering Enormous Data Sets — Components for virtual lists / tables that can efficiently (and lazily) work through huge data sets. Luckily the homepage has plenty of examples. GitHub repo.

Petyo Ivanov

CSS Components: A Way to Componentize Your CSS Styles — Not another styling system, but a lightweight utility to compose CSS styles into standard React components.

Phantom Land

React Scroll Parallax: Parallax Scroll Effects — Utilizes Parallax Controller to add vertical or horizontal scrolling based effects to elements. Optimized to reduce jank on scroll and works with SSR and SSG rendered React apps. Here’s a Storybook full of examples.

J Scott Smith

react-timezone-select: A Timezone Selection Component — Can adjust its options dynamically based on DST and restricts choices to the minimum needed to represent all timezones. Demo.

Nico Domino

React Authentication, Simplified

Userfront sponsor

react-use-exceljs: A Hook to Generate XLSX Files — Wraps around ExcelJS and FileSaver.js for both producing and then saving Excel spreadsheets as a downloaded file.

dadamssg

React Native SVG: SVG Library for React Native — There’s also a compatibility layer to let it work with regular React too.

Software Mansion

React Multivalue Text Input — A text input component that maintains and displays a collection of entered values as an array of strings (such as for a tagging system).

Rosalind Wills

Jobs

Find React Jobs with Hired — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.
Hired

QUICK RELEASES: