#​352 — August 16, 2023

Read on the Web

⛱ I'm taking two weeks off and will be back on Wednesday, September 6. So if you don't see the newsletter turn up for a while, rest assured it's not your fault ;-)
__
Peter Cooper, your editor

Together with  logo
React Status

Using TypeScript with React — Several folks noticed that the official React docs didn't provide any details on using React with TypeScript, so Mark Erikson filed an issue, and now, courtesy of Orta Therox, one exists!

React.js Docs

'My Experience Modernizing Packages to ESM' — Mark, well known for his work on React and Redux, details the painful experiences and hard-earned lessons learned migrating the Redux packages to ES modules

Mark 'acemarke' Erikson

Headless CMS with AI Capabilities, That’s Kontent.ai — Streamline your code and scale with ease using Kontent.ai. Generate TS types from your content model, use CLI for maintenance tasks, and leverage rich text resolvers to map React components easily. And finally, use AI to generate and improve content!

Kontent.ai sponsor

Where Should I Put My Components in the Next.js App Router? — Find out what your options are for where you can put all your components in an App Router application. We’re more used to seeing Jack on his YouTube channel, but he now blogs too.

Jack Herrington

📝 Jack has some other Next.js-related posts available too, including What's the Order of Component Rendering?

Radix UI: Unstyled Accessible Components to Build on Top Of — If you want to design your own components while still having a solid foundation to work on top of, Radix might be a good fit for you.

WorkOS

Comparing Optics with JotaiJotai and Optics are two state management libraries that share some interesting similarities.

Vincent Quillien

Building a Two-Way Data Binding Hook for Form Inputs — Two-way form input binding is a popular feature offered by frameworks like Vue and Svelte – what might a React version look like? Consider this more an experiment than anything.

Alex MacArthurt

React Authentication — Without Complexity — Userfront streamlines authentication & access control so engineers can focus on their core business. Read the docs now.

Userfront sponsor

The Simplest Example to Understand Server Actions in Next.js
Sebastien Castiel

Create Email Templates with React Email
Colby Fayock

Migrating My Blog from Gatsby to Astro
Artem Sapegin

🛠 Code and Tools

Yet Another React Lightbox — Add a lightbox component to your projects “in minutes” – there are several examples to try, as well as a playground with adjustable settings. GitHub repo.

Igor Danchenko

StateDecorator: Hooks for Managing Complex Component State — Sent in by a reader and extracted from a production system, StateDecorator was built to have some of the good aspects of Redux but simpler to use, easy to load on demand, and without a lot of boilerplate.

GlobalSport SAS

iconbundler: Convert SVG Icons to React Components — A web based tool for optimizing and converting a collection of SVGs into React components. Well React, Vue, and Svelte components, but who’s counting?

Chris Widmaier

Styled2Tailwind: Transform Your Styled-Components into TailwindCSS — An interesting example of a codemod.

Blazity

📰 Classifieds

💻 Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.


🎙️ Join us at SurrealDB World as we unveil SurrealDB 1.0.0 - An open-source, developer-friendly, fully ACID transactional, realtime document-graph web database for serverless apps.

Classifieds is a way to share projects, services, events, or jobs you may find useful, replacing our job listings section.

useHooks 2.1: A Collection of 'Server Component Safe' React Hooks — A collection of modern, server-safe React hooks. Has just had another update. Compatible with React 18+.

Gabe Ragland

👋 We'll be back in three weeks on September 6, 2023. See you soon! If you have anything to submit for the next issue, hit reply and let us know (but appreciate we may be slow to reply since we'll be on vacation 😉).