#175 — February 12, 2020

Read on the Web

React Status
Your weekly React news digest, every Wednesday

use-places-autocomplete: A Hook for Google Maps Places Autocompletion — If you have a location input field and you want to add powerful autocomplete features to it, the Google Maps Places API provides a possible solution.

Welly Shen

Type Route: A Flexible, Type-Safe Routing Library — A flexible routing library with TypeScript support, designed with React integration in mind (indeed, it’s used in React Router), but can be used with any framework (Vue, Angular, etc).

type-route

Building a Fully-Featured Form Component in React (Example) — Creating forms in a React app can be tricky. An efficient way to manage all this is to use a third-party Form component. Read on to see how you can easily take care of the tedious aspects of building forms.

Progress KendoReact sponsor

Downshift 5.0: Primitives to Build Accessible Input Components“You need an autocomplete/dropdown/select and you want it to be accessible. You also want it to be simple and flexible to account for your use cases.” Here’s an introductory post and here’s what’s new in 5.0.

Downshift

How to Fix "not wrapped in act(...)" Warnings — An issue you might be running into when testing. There are a few reasons you’d be getting this warning but Kent’s here to help and breaks it down for us.

Kent C Dodds

React Navigation 5.0: A New Way to Navigate React Native AppsReact Navigation is a popular navigation solution for React Native apps and 5.0 is a major refactoring with a new dynamic API. A must see for any RN users.

Satyajit Sahoo and Michał Osadnik

💻 Jobs

🦄 Unicorn Designer & Developer needed in Beautiful Norway — Excel in both design and frontend dev? Join us and implement with React.

Snowball Digital

Find a Dev Job Through Vettery — Vettery is completely free for job seekers. Make a profile, name your salary, and connect with hiring managers from top employers.

Vettery

📘 Tutorials and Stories

Nullish Coalescing with React and TypeScript — A very brief look at what nullish coalescing is and how it might be used in a React component.

Carl Rippon

Deep Linking in React Native — ‘Deep linking’ is the idea of being able to navigate deep into a specific screen or state within a native app (e.g. a URL that takes a user in the browser to a particular item of content in your app), and you can bring this functionality to your React Native apps too.

Natko Bišćan

ForwardJS Ottawa (May 26-29) Speakers Announced — Topics include React/Redux, TypeScript, containers, design systems, static sites, scaling teams and monorepos. Join us.

ForwardJS sponsor

How to Create Custom Hooks For Your Web Components — How to create a React custom hooks to bind your Web Components events with useEffect.

David Dal Busco

Offering Subscriptions with In-App Purchases in React Native Apps — How to integrate iOS in-app purchasing into React Native projects.

Ross Bulat

▶  Discussing using React with Scala.JS with Shadaj Laddad — A 38 minute show that focuses on an often overlooked area of the React ecosystem, using it from languages that aren’t JavaScript or TypeScript.

CoRecursive Podcast podcast

Six Things I Wish I Knew About State Management — ..when I started writing React apps.

Veeral Patel

🔧 Code and Tools

React Spectrum: Generate Colorful Text Placeholders — There’s a demo page that auto generates examples for you too.

Ganapati V S

Bojagi: A Design Review Process for React Components — We don’t often link to unreleased services, but this one might interest you if you’re a designer or work with designers and want to make the review process simpler.

Bojagi

React Virtual Keyboard: A Customizable Keyboard Control — I’ve never quite seen the use for these (kiosks, maybe?) but this is one of the smoothest looking such components I’ve seen nonetheless. Demo here.

Francisco Hodge

Axe Pro: Free Accessibility Testing Tool Created for Development Teams

Deque sponsor

Ionic 5 Released: A Popular Webapp + Native Framework — Ionic’s goal is to get you an app you can put on an app store and the Web with a single shared code base, yet with adaptive styling to look native in each case. It was originally focused on Angular but now has an official React integration.

Brandy Carney

Data Table Component 6.3: A Flexible React Data Table Library — Packed with features but easy to set up. Uses React 16.8+ and styled-components. Demos here.

John Betancur

react-fetch-hook: A React Hook for Conveniently using the Fetch API

Ilya Lesik

React Kanban: Yet Another Kanban/Trello-Style Board Library

Leandro Lourenci

reactsweeper: A Basic Minesweeper Implementation in React — .. and TypeScript. I spent a fun five minutes doing a board. Code worth reading too.

Nick Scialli