--- title: "Trying to use React Native 'everywhere'" publication: "React Status" issue: 256 published_at: "2021-09-15" canonical_url: "https://react.statuscode.com/issues/256" --- Plus CSS variables for React devs, and a date range picker component. | #​256 — September 15, 2021 [Read on the Web](https://react.statuscode.com/issues/256) React Status ⚛️ _Your weekly React news digest, every Wednesday_ [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/xxuzp2epeaf7lq0gcmxe.jpg)](https://joshwcomeau.com/css/css-variables-for-react-devs/) [CSS Variables for React Devs](https://joshwcomeau.com/css/css-variables-for-react-devs/) — An updated piece, and a solid look at how to use CSS variables (custom properties) in your next project. Josh W Comeau [Compound Components In React](https://www.smashingmagazine.com/2021/08/compound-components-react/) — Compound components are the building blocks of [design systems](https://en.wikipedia.org/wiki/Design_system). If you have the development of the latter in your future, the tutorial will get you up and running on this advanced React pattern. Ichoku Chinonso [![\](https://copm.s3.amazonaws.com/78ea9f9f.png)](https://buttercms.com/react-cms/?utm_source=reactstatus&utm_medium=email&utm_campaign=canyouupdateoursite) [ButterCMS - #1 Rated Headless CMS. Melts into React Apps](https://buttercms.com/react-cms/?utm_source=reactstatus&utm_medium=email&utm_campaign=canyouupdateoursite) — ButterCMS is the #1 rated Headless CMS for React. Enable your marketing team to update website content w/ our easy to use dashboard. Fast content API for modern apps. Secure. Scalable. Less Code. Try free today for 30 days. BUTTERCMS sponsor [Running _React Native_ Everywhere](https://t.co/f9qfXQ3rZ3?amp=1) — The first part of an in-depth, multi-part guide on running a common React Native code base not only on the iOS and Android mobile platforms—as one might expect—but also on macOS, Windows and as a web app, as a browser extension, as well as within Electron. Matteo Mazzarolo [React 18 Watch: New `startTransition` API Keeps Apps Responsive During Large Screen Updates](https://blog.saeloun.com/2021/09/09/react-18-introduces-starttransition-api) — Up until the imminent React 18, all updates were considered ‘urgent’. [startTransition](https://reactjs.org/docs/concurrent-mode-patterns.html#transitions) enables the prioritization of updates so truly urgent ones get handled right away and everything else gets dealt with at a lower priority. Chetan Gawai [Relay v12](https://github.com/facebook/relay/releases/tag/v12.0.0) — The latest release of Facebook’s mature [GraphQL](https://graphql.org) client is out. In addition to run-time optimization, the new release includes improvements to React integration as well as logger, type-safety, and documentation updates. However, it also includes some breaking changes: in particular [Abstract Type Refinement](https://relay.dev/docs/glossary/#abstract-type-refinement) has changed and there are also changes to live query behaviour. Facebook [Graceful Error Handling Using Error Boundaries in React](https://www.amitmerchant.com/graceful-error-handling-using-error-boundaries-in-react/) — A runtime error in React can result in a blank screen and a bewildered user. [Error Boundaries](https://reactjs.org/docs/error-boundaries.html) enable the error to be caught and a more meaningful, fallback UI displayed instead. Amit Merchant Jobs [Senior ReactJS+Rails Engineer (x/f/m) Remote or Berlin, Germany](https://grnh.se/b4ec4e083us) — Join us to transform healthcare and have a positive impact on the lives of millions of patients and practitioners alike. Doctolib [Find React Jobs with Hired](https://hired.com/join/?utm_source=newsletter&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-all%29%28cooper-reactstatus%29&utm_content=find-your-next-job) — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers. Hired [Migrating from Create React App](https://nextjs.org/docs/migrating/from-create-react-app) — A guide on how to transition from an existing non-ejected Create React App project to Next.js – an option that will open up a lot more possibilities such as API routes, incremental static regeneration, and better data fetching options. Vercel [Implementing Material Design’s Floating Labels](https://maxschmitt.me/posts/material-design-floating-labels-in-react/) — _"It's a fun little exercise and it's not actually too difficult,"_ Max reassures us. Or you can just straight to [the CodeSandbox](https://codesandbox.io/s/mui-floating-labels-yc992?file=/src/TextField.js). Max Schmitt [Beyond onClick: Handling Events in React](https://go.lightstep.com/register-beyond-onclick-guide-co21?utm_campaign=react&utm_source=cooper&utm_medium=Email) Lightstep sponsor ▶[Scaling WordPress with Next.js](https://portal.gitnation.org/contents/scaling-wordpress-with-nextjs) Colby Fayock [`useState` in React: A Brief Guide](https://javascript.plainenglish.io/usestate-in-react-a-complete-guide-98846ef47391) Rohit Kumar Singh [Using SWR React Hooks with Next.js’ Incremental Static Regeneration](https://www.smashingmagazine.com/2021/09/useswr-react-hook-library-incremental-static-regeneration-nextjs/) Sam Poder [Make Real-Time APIs with Node.js and React Using Socket.io](https://t.co/skzIraIK1g?amp=1) Kuldeep Patel 🛠 Code and Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/uwhqlobggbsmujubitjf.jpg)](https://github.com/hypeserver/react-date-range) [react-date-range 1.4.0: Component for Selecting Dates and Date Ranges](https://github.com/hypeserver/react-date-range) — An intuitive component for picking date ranges as shown in their [demo](https://hypeserver.github.io/react-date-range/). Hypeserver [![\](https://res.cloudinary.com/cpress/image/upload/v1631698704/ehnueie7oozkih3dii86.png)](https://github.com/mdbootstrap/mdb-react-ui-kit) [mdb-react-ui-kit](https://github.com/mdbootstrap/mdb-react-ui-kit) — It's the popular [Material Design](https://material.io/design) design system, but for [Bootstrap 5](https://getbootstrap.com/docs/5.0/getting-started/introduction/) and React 17. It comes in both a free and fee-based Pro version. There's plenty of demos here and a decent tutorial to check out too. MDBootstrap [react-p5-wrapper](https://github.com/jamesrweb/react-p5-wrapper) — Enables [p5.js](https://p5js.org) sketches to be incorporated into your React app. James Robb [testing-react](https://github.com/storybookjs/testing-react) — Recycle your [Storybook](https://storybook.js.org) stories into React tests. Storybook [plyr-react](https://github.com/chintan9/plyr-react) — An accessible and customizable player component for both video and audio as well as YouTube and Vimeo-hosted content. Chintan Prajapati ## ⚡️ Quick Bits: - [react-native-camera](https://github.com/react-native-community/react-native-camera) — A React Native camera component including support for bar code scanning. - [react-native-shadow-2](https://www.npmjs.com/package/react-native-shadow-2) — A recreated and extended version of the long-dormant [react-native-shadow](https://github.com/879479119/react-native-shadow) component for generating SVG shadows. - [React Password Checklist](https://github.com/sators/react-password-checklist) — Ensure passwords meet specific, configurable criteria. - [unplugin-icons](https://github.com/antfu/unplugin-icons) — Access any of 100+ icon sets as and when you need them. This issue was curated by Terence C. Gannon and edited by the Cooperpress team. A **[Cooperpress](https://cooperpress.com/)** publication. [Change your email address](https://react.statuscode.com/edit_subscription/*|UID|*) or[Stop getting this newsletter](https://react.statuscode.com/leave/*|UID|*) © Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom