Better toast for React
#250 — August 4, 2021
What’s New in React-Hot-Toast 2.0 — React 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.