#​299 — July 27, 2022

Read on the Web

React Status

Examples of Larger Production-Grade, Open Source React Apps“All of the to-do apps are great for starting to learn React, but what about real-life? Let’s see what real production React apps are like.” I see people asking for examples like this every week on social media, so this post is very useful - thanks Max!

Max Rozen

Mantine 5.0: Full Featured React Component Library — The developers of this popular MIT-licensed, TypeScript-based collection of 100+ components and hooks are back with yet another major release with full React 18 support, as well as new or improved APIs for their tabs, accordion, and popover components. The Mantine team's velocity is impressive and it’s an elegant set of components too.

Mantine Team

SpreadJS: A Powerful React Spreadsheet Library for Web Apps — SpreadJS: the industry-leading JavaScript spreadsheet for adding advanced spreadsheet features to your enterprise apps. Build finance, analysis, budget, and other apps. Excel I/O, 500+ calc functions, tables, charts, and more. View React demos today.

SpreadJS from GrapeCity sponsor

A Sneak Peek at Storybook 7.0 — The new major release of Storybook (a popular UI component dev tool) is just around the corner and here’s an early look at what to expect: visual updates, UX tweaks, and faster performance.

Dominic Nguyen

How to Use Leaflet to Display Google Maps-like Maps — When someone says something is “quicker and easier to set up than you think”, I raise a cynical eyebrow, but this is very straightforward as long as you’re happy to lean on OpenStreetMap.

Casey Falkowski

Quick bits:

  • The New Stack has profiled a company that's built a ML-powered multilingual customer support system that can cope with 'industry specific jargon' and is built on React atop Java.

  • A React developer with eight years experience (almost as long as React has existed) shares how he writes React after eight years. Is it contrarian and highly opinionated? Absolutely.

  • A developer makes the argument that Remix isn't really a React framework but more a full-stack Web framework generally.

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

How to Create a Tic-Tac-Toe Board with React — What better way to get some experience with React: this article takes you through the entire lifecycle of activities for the classic zero-sum game of perfect information.

Diego Zanivan

▶  Six State Mistakes Every Junior React Developer Makes(16 minutes.)
Lama Dev

How to Make a Range Component with rc-slider
Matthew Croak

🛠 Code and Tools

React Simple Maps 3.0: Beautiful SVG Maps for React Apps — Powered by d3-geo and topojson and provides a declarative API for defining maps to render. Lots of examples here.

Z Creative Labs

Mailing 0.5: Build, Test, Send Emails with React — If working with HTML emails feels like taking a trip back to 1999 (tables, no JavaScript, and all the rest) this toolkit that brings some modern niceties to the process is for you.

Peter Sugihara

Unlock Completely Free Access to Stream's Chat & Activity Feed APIs

Stream sponsor

Another State Management Solution for React? Providence! — Newsflash: Another state management library has rolled into town :-) And this one is “better”.. Curiously, it’s built on top of Redux, too, keeping many of Redux’s advantages while claiming to reduce the amount of “fighting” you need to do to make things work. You be the judge.

OpenCraft

react-float-menu: A Draggable, Smart Menu — And, unsurprisingly, the menu floats. There’s also a Vue version.

Prabhu Murthy

next-international: Type-Safe i18n for Next.js — Promises 100% type safety and is only 1.2KB gzipped. A fair bit of cleverness going on here if TypeScript is your bag.

Tom Lienard

react-intersection-observer: React Component to Monitor When an Element Enters or Leaves the Viewport
Daniel Schmidt

⚡️ THE RAPID RELEASES ROUND

React Native Testing Library 11.0
Emoji Mart 5.2 – Emoji picking component.
TanStack Table 8.5 – Headless UI for building tables and datagrids.
flowchart.fun 1.9 – Generate flowcharts and diagrams from text.
React Spring 9.5.2 – Spring physics based animation library.
Remotion 3.1.7 – Create videos programmatically in React.
React-Windows-UI 4.1 – Build Windows fluent UI apps with React.