#​250 — August 4, 2021

Read on the Web

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

What’s New in React-Hot-Toast 2.0React Hot Toast is a popular React on-page notifications system. Although the opportunity to customize the notifications in the new release chips away at the original ‘toast’ metaphor, there’s a lot of configurability in the new version that will prove valuable for many. It also has better accessability and a custom renderer. GitHub repo.

Timo Lins

Gatsby Serverless Functions and the International Space Station — Many eyes have been on reaching space lately, but Paul Scanlon is busy looking at the ISS and how to put together an app for tracking its position on a 3D globe using React, Three.js, and a serverless platform called Gatsby Functions.

Paul Scanlon

Get a GraphQL Backend Without Building One - Instant GraphQL API in 30 Seconds — Point Hasura at your databases & get realtime GraphQL APIs with authz instantly. No need to build, operate & scale a GraphQL server. Loved by devs and downloaded over 250M times — making it the fastest growing open source GraphQL service. Get Started in 30s.

Hasura sponsor

Recoil 0.4.0 Released — Another couple of months in the inexorable march to its first official release, there is a new preliminary release of Recoil, an experimental state management library for React apps being built by a team at Facebook (not the React team itself, notably). There’s a couple of new features and a number of bug fixes and optimizations.

Facebook Experimental

How We Reduced Next.js Page Size by 3.5x and Achieved a 98 Lighthouse Score
Colin Armstrong

Build a React App with Authorization and Authentication (with AWS Amplify) — Another of Ali’s signature, well-thought-out tutorials. We have parenthetically added that it makes use of Amplify, AWS’s scalable mobile app development platform.

Ali Spittel

Jobs

Senior Software Consultant - React.js (100% Remote US & Canada) — We're a growing employee-owned engineering consultancy on a mission to improve the way the world builds software. We focus on reducing technical debt, writing maintainable code, and mentoring some of the best teams in tech.
TestDouble

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

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

Building a React State Validation Hook using Yup — 'Yup' is a JavaScript schema builder for value parsing and validation. Define a schema, transform a value to match, validate the shape of an existing value, or both

Sandip Mane

Testing React Native Apps — Some quick practical examples of bringing automated tests to an app.

Zain Sajjad

Running a Next.js Site on Cloudflare Pages
Patrick Heneise

How to Make Your React App a Progressive Web App (PWA)
Nabil Alamin

Creating a Custom Context Menu Component Using React Hooks
Anand Simmy

React Native Responsive Scaling on the Web
Matteo Mazzarolo

Create a Simple Lightbox in React
Kevin Van Ryckegem

🛠 Code and Tools

HTM 3.1.0: A JSX Alternative using Standard Tagged Templates — This clever library has been around a few years but continues to see updates. Think JSX-style syntax but in plain JavaScript (using tagged templates) that requires no transpilation but still supports things like rest spread and referencing components.

Jason Miller

react-tracking 9.0: Declarative Tracking for React Apps — I’m a big fan of their crosswords, but the NY Times puts out a lot of code too.

The New York Times

Beyond onClick: Handling Events in React

Lightstep sponsor

deck.gl: Simplify Visualization of Large Geospatial Data Sets — A complete set of facilities for rendering, picking and highlighting geospatial data which also has ready-to-go integrations for major basemap providers. Also has a React-specific tutorial.

Vis.gl

Evergreen: Mature UI Framework Implementing Segment's Design System — We first covered Evergreen v4 back in 2018 when we reported it was a “suite of polished React components”. V6 is just out, and major improvements necessitated some breaking changes. Also this recently released, succinct tutorial will help get you started.

Segment

CKEditor WYSIWYG Editor for React — A popular robust WYSIWYG editor (which is both GPL and commercially licensed) ready to integrate with your application, as illustrated with the demo.

CKEditor

Windy: A React UI Kit Based on Tailwind — Fans of Tailwind now have an entire UI kit based on it at their disposal.

weBeetle

⚡️ Quick Bits:

  • Filemanager — Minimize the learning curve by implementing a file browsing experience based on the one the user already knows.
  • react-country-region-selector — Outsource the whole problem of knowing which regions relate to which countries.
  • rc-queue-anim — Animate React components in a queue.