React Newsletter #218

Zelda, Watering your Lawn with React, and a new react-query release


News

From now on, React Newsletter will be coming at you every Tuesday instead of Thursday. If you’re interested in a weekly breakdown on other frontend technologies, be sure to check out our other newsletters.


Articles

6 React projects

This article gives some good ideas for React projects that are a little more unique than most project ideas. It also gives some instructions and resources for getting started with each one.

Create a Lazy-Loading Image Component with React Hooks

Lazy-loading images (like those in Medium or those created by gatsby-image) can sometimes add an extra touch of style to a page. To create such an effect, one will need A) a tiny version of the image for preview, ideally inlined as data URL, and B) the aspect ratio of the image to create a placeholder to prevent reflows. In this article, Jason will share how he created a lazy-loading image component with React Hooks.


Tutorials

How to replicate the Zelda BOTW interface

This intermediate-level tutorial demonstrates how to use React, Tailwind CSS, and Framer Motion to replicate the Zelda BOTW pause screen. Not totally realistic because there aren’t 250+ apples in the inventory, but other than that it’s great.

Setting up a CI/CD workflow on GitHub Actions for a React app

​ This tutorial walks through setting up a workflow that will be responsible for automatically testing the source code, generating a test coverage report and uploading it on Codecov, and building and deploying the project on GitHub Pages.


Projects

automated-irrigation-system

Some people make bread during quarantine, Patrick made an open-source irrigation system and app using React, Node, and some Raspberry Pi’s.

useWebAnimations

A nice Hooks abstraction over the Web Animations API.

  • Animate on the Web with highly-performant and manipulable way, using Web Animations API.
  • Easy to use, based on React hook.
  • Built-ins polyfill for better browser compatibility.
  • Super flexible API design which can cover all the cases that you need.
  • Supports custom refs for some reasons.
  • Supports TypeScript type definition.
  • Server-side rendering compatibility.

Resources

React Toolkit v1.4.0

This release updates Immer to v7.x, adds new options for defining "matcher" and "default case" reducers, and adds a new option for adding middleware to the store.

react-query v2.0.0

​ This new release from Tanner Linsley includes better query invalidation & re-fetching, less over-fetching, simplified dependent query syntax and new idle query state, multi-instance polling and more


Videos

React Hook Form v6 preview

This video was created by the creators of React Hook Form and shares some of the new features and changes coming soon to the library, which include better TypeScript support, reducing the weight of the library, and introducing a few new features.


made with ❤️ by ui.dev