🥄 A faster alternative to Storybook
#281 — March 23, 2022
React Flow 10: For Creating Interactive Node-Based UIs, Editors, and Diagrams — Although we covered this in issues 235 and 187, a new major release warrants another look. Amongst the new features and improvements: sub-flows, touch device support as well as some new hooks and properties. This blog post provides a good overview.
Everything You Need To Know About the React 18 RC — React 18 remains imminent with a third release candidate out just now. This post aims to prime you on what’s new so you won’t be at all surprised when the final drops.
Kathryn Grayson Nanz
🧈 ButterCMS Melts into Your React App. #1 Rated Headless CMS — ButterCMS is your content backend. Enable your marketing team to update website + app content without needing you. Try the #1 rated Headless CMS for React today. Free for 30 days.
🧈 ButterCMS sponsor
Liqvid 2.1: Create Interactive ‘Liquid Videos’ in React — The new version now lets you use the Web Animations API. It also includes a new useTime hook for prop-updating animation, improved usability as well as laying the groundwork for further future improvements. Remotion is another option to consider in this space focused more on rendered video.
🔥 Hooks Considered ‘Harmful’ — The author claims to “find a dozen of hooks-related problems every single week” and he has used that experience to present examples, workarounds and otherwise avoid the “rough edges of the API”. This led to quite a big discussion on Hacker News.
Pau Ramon Revilla
Introducing Ladle: Develop and Test Your React Stories Faster — A new tool for building and testing React components in an isolated environment. Reminds you of Storybook? Ladle aims to be a drop-in replacement but that offers faster performance all round (and, yes, there are benchmarks).
The Next.js project has unveiled a new foundations course for anyone who wants to pick up the prerequisite knowledge for working with Next.js.
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.
Senior React Developer (Remote) — Get featured directly to tech companies hiring React developers right now. Land an interview in as little as 24 hrs.
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.
How to Create and Validate a React Form with Hooks — There are libraries to abstract away a lot of this work (e.g. Formik) but if you want to do it by hand, as it were.
Writing a React Table of Contents Component — Although a table of contents can improve UX by letting readers jump directly to their preferred content, the setup and maintenance of such a control can involve a lot of drudge work. So why not have the table of contents (almost) look after itself?
Upgrading Next.js for Instant Performance Improvements — A case study of how the Vercel team brought a Next.js 8 demo up to Next.js 12 standards and saw huge improvements in the process.
Storing State in the URL with React
🛠 Code and Tools
Turnstone: A React Search Component — A fully customizable search box with autocomplete dropdown, typeahead, the ability to group results from multiple data sources, WAI-ARIA compliance and more. The main aim is for the easy combination of results for multiple data sources into a single field.
React Webcam 7.0: A Component to Work with Webcams — Grab an image from a web cam, select a camera of your choice, etc.
Kontent by Kentico sponsor
react-map-gl: Interactive, Thoroughly Customizable Maps in the Browser — A React API for the capable and mature mapbox-gl-js library, which was first created by Uber’s visualization team. Want some demos? Of course.
Reactivated: The Easiest Way to Use React and Django Together — One for the Pythonistas!
MDX 2.1: Use JSX in Markdown Documents
Compositor and Vercel
⚡️ Quick Bits:
react-spinner-animated — A variety of different ‘spinners’ using novel animation effects.
react-form-stepper — Simple component for indicating progress in multi-step forms.
react-native-awesome-gallery — Performant, native-like and customizable gallery component.