#​291 — June 1, 2022

Read on the Web
React Status

Glide Data Grid 4: A Fast Data Grid for React Projects — Bills itself as a “no compromise, outrageously fast data grid” that can support up to millions of rows with rich rendering and TypeScript support. The homepage features a neat demo and it’s MIT licensed too. GitHub repo.

Glide

Payload, a Node-Based Headless CMS, Now Fully Open Source — Payload, is a full-featured headless CMS (built on top of Express.js, MongoDB, and React) and has just moved to the MIT license which opens up a lot more use cases. GitHub repo.

James Mikrut (Payload CMS Blog)

Updated Course: Complete Intro to React — Join Brian Holt for this updated look at getting started with React. Covering things like hooks, effects, context, and portals. Throughout this video course you’ll learn about tools from across the entire React ecosystem (like Parcel, ESLint, TailwindCSS, and React Router).

Frontend Masters sponsor

Storybook 6.5: New Workflows Intended to Enhance Productivity — The new release of the popular component development tool includes interaction testing to verify user behavior in the browser, a Figma plugin to connect stories to variants and Webpack 5 lazy compilation for faster start up.

Michael Shilman (Storybook)

Quick bits:

Jobs

Senior Software Engineer at This Dot Labs (Remote, Worldwide) — Great benefits working in modern tech stacks and amazing clients such as Google, Meta, Twilio, Cloudinary, Roblox, and more.
This Dot Labs

Find React Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.
Hired

▶  When to Fetch: Remixing React Router — Presentations from the recent Reactathon event continue to roll out. In this one Ryan Florence, one of the founders of Remix, extolls the virtues of moving responsibility for ‘when to fetch’ into React Router.

Ryan Florence

QR Code Generation with React
Ejiro Thankgod

🛠 Code and Tools

Boring Avatars: React Library to Generate Custom Avatars — Ranging from generic gradients to face-like creations, this library (GitHub repo) generates custom, SVG-based, round avatars from any username and color palette.

Boring Designers

React Mentions 4.4: To @mention People in a Textarea Field — Use this to replicate the Facebook/Twitter-style mentioning effect within text fields. Live demos here.

Signavio GmbH

Free Activity Feeds & Chat APIs for Qualifying Teams

Stream sponsor

Browser Extension Template: Quickly Flesh Out a Browser Extension Codebase — Think create-react-app but for an extension, kinda. React and Preact are supported directly too.

Debdut Karmakar

Formation: A Brand New Library of 20+ WCAG-Focused Components — One of the benefits of brand new component libraries is they tend to focus on the essentials, so with this project you’re offered all the WCAG 2.0-focused components you need, none you don’t.

Josh Schneider

React Holmes: Elementary State 'Orchestrator' for React — Holmes claims to have just one objective: “make state management as easy and fast as possible.”

devx-os

⚡️ Quick Bits:

react-stick — Stick a portaled node to an anchor node, as per this demo.

react-smooth-corners — For a fresh new look, smooth the rough corners off your React elements.

react-collapsible — Wrap content in a collapsible element with a trigger to open and close.

reactable — Interactive data tables for the R statistical and graphics environment, as illustrated with these demos. And yes, you can use React with R!

😎 And one for fun!

Game of Life: A Modern Take on the Classic — On one hand, just playing with this twist on the classic cellular automation simulation is pretty fun on its own. But once you've done that for a while, you can take a peek under the covers with the GitHub repo – an easy to follow implementation using some modern React features.

Andrea Carrara