#171 — January 15, 2020

Read on the Web

React Status
Your weekly React news digest, every Wednesday

A React Spring VisualizerReact Spring is a popular spring-physics based animation library for animating components and this is an interesting way to see how different settings affect the animations.

Joost Kiens

Craft.js: A React Framework for Building Drag and Drop Page Editors — It’s a bold move to make the landing page for your project be a text editor itself, but I like it :-)

Prev Wong

One Codebase. Any Platform. Just React — Build awesome apps across mobile, desktop, and web, with the React you know and love. Choose from over 100 mobile-ready components with built-in animations, gestures, and theming capabilities to fit your brand.

Ionic React sponsor

Magical Rainbow Gradients with CSS Houdini and React Hooks — Whether or not you like the end effect (an animated gradient on a button), this is a fantastic and partially interactive exploration of solving a styling problem.

Josh Comeau

Styled-Components 5.0: Faster CSS Styling for React ComponentsStyled Components is a popular way to bring CSS and JavaScript together for styling components. And before you think, this post is dated months ago, v5.0.0 only officially dropped this week :-)

Evan Jacobs

Building LightOS with React Native — The Light Phone 2 is a minimalist cellphone that was named one of Time Magazine’s best inventions of 2019 and.. did you know its OS was built with React Native? Here’s the story, why React Native was chosen, and how it was built.

Hugh Francis

💻 Jobs

Full-Stack or Front-End Engineer - Rails/React (Remote/NYC) — Got 2+ years of experience? Come help build the next iteration of our growing digital recovery platform centered on providing alcohol abuse treatment.

TEMPEST

Find a 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

Adding React Fast Refresh to Your Create React App Project — While it is still in development you can finally try React Fast Refresh in your Create React App project, without even ejecting.

Eldad Bercovici

Implementing a Loading Placeholder with React Content Loaderreact-content-loader is a SVG powered way to create ‘content loading’ placeholders.

Kohei Asai

Building Chat With React? Stream Chat Has You Covered — Have a look at our interactive chat tutorial in React and learn how to build with Stream Chat.

Stream sponsor

▶  What's Changed in Styled Components v5 — The key changes in the new Styled Components release (featured above) wrapped up in just two minutes.

Adrian Twarog

▶  Should You Upgrade to React Navigation 5? — A brief comparison of React Navigation 4 and 5.

Adrian Twarog

How to Build a CRUD App with React and Apollo GraphQL

Kelvin Gobo

react-intl: An API and Component Analysis

Zain Sajjad

Environment Settings for Build Once Packages in React

Daniel Little

🔧 Code and Tools

React Date Picker: A Simple and Reusable Date-Picker Component — We have an annual date picker/calendar component quota to meet, so let’s get started :-) This is a mature option that continues to get frequent updates. Demo here.

HackerOne

Spectacle: React-Based Presentation Library — Got a presentation to do? Build your decks with JSX! The best way to get a feel for what it can do is via this live slide deck.

Formidable

CFP for ForwardJS San Francisco and Ottawa Now OPEN

ForwardJS sponsor

React Carousel Image Gallery Component with Thumbnail Support

Xiao Lin

Storybook 5.3 Released — Last week we featured an update on the state of Storybook, a popular component prototyping and showcasing tool, and now there’s a new version including design integrations with Sketch, Figma and Adobe XD, the ability to write stories and docs in MDX, and more. Adrian Twarog has a quick video covering the update too.

Michael Shilman

useQueryParams: A React Hook for Managing State in URL Query Parameters — Encode and decode data of any type as query parameters with smart memoization to prevent creating unnecessary duplicate objects.

Peter Beshai