~reactstatus | Bookmarks (132)

The State of React 2024 Survey Results — There’s too much to go into depth here, so enjoy having a browse through insights gleaned from almost 8,000 responses. We get to learn that forwardRef and memo are the two top ‘pain points’ among React devs, Redux continues to lead amongst state management libraries, and SPAs continue to make up the majority of React use...

Quicky: An Easy Way to Self-Host Next.js & Node.js Apps — A CLI tool that simplifies deployment and management of Next.js and Node projects.

The React Data Table I Always Wanted — A look into a particularly fast and clean shadcn/ui-based data table component (GitHub repo). You can see a live demo here.

React D3 Tree: Interactive Tree Graph Component — Handy for things like family trees or org charts. There are a few practical examples on display here. Uses D3 for rendering. GitHub repo.

Build a Next.js Sign-Up Form with React Hook Form — Features progressive enhancement, dynamic validation, and secure password handling with Argon2.

Why I Rebuilt ProseMirror’s Renderer in React — A former engineer for the New York Times unpacks years of work on integrating React with ProseMirror, a toolkit for building rich text editors which notoriously does not ‘play nicely’ with React. A great look into the details of the challenges involved.

Using Phoenix with React and Inertia — Phoenix is arguably the web framework for the Erlang VM-based Elixir language.

React Query - The Bad Parts Tradeoffs? — Dominik caps off a fantastic series of posts digging into React Query (and spanning years) with an annotated set of slides from a recent talk digging into frequent criticisms about the project. If you're a React Query user, you might learn a few things here.

Vite with TypeScript — If you’ve created a JavaScript-based React project with Vite and want to get on the TypeScript train, here are the basic steps.

React and OpenLayers Integration: A Comprehensive Guide — Add interactive maps to your React app by integrating with the well-established OpenLayers mapping library.

Find. Fix. Test: Intro to Sentry & Codecov — Code-level visibility, from pre- to post-release, lets devs find and fix errors and slowdowns and deploy with confidence.

Emoji Picker: A Sweet and Simple Tailwind-Styled Emoji Picker — Pretty much ‘what it says on the tin!’ Minimally styled and easy to adapt, fast, lightweight, accessible, and everything you’d want in a simple emoji picker. Certainly faster than the macOS one.. GitHub repo.

🐝 Wasp 0.16: A Rails-Like Framework for React, Node and Prisma — A once common complaint was a lack of larger Ruby on Rails-esque opinionated frameworks for both Node and React. React has picked up various approaches like Next.js and Redwood, but Wasp, now a pretty mature project, goes all the way by calling itself ‘Rails-like’. it’s well worth a look.

shadcn-ui-tree-view: shadcn-ui Based Tree View — A shadcn/ui flavored tree view component with selection, folder management, and visual feedback.

Unpic 1.0: A Toolkit for Displaying Images on the Web — A family of components and libraries for working with images on the Web, whether it’s through components for many different frameworks or working with images hosted on many different providers and CDNs.

Ruck 9.0: A React Webapp Framework for Deno — A lean React-based way to build modern React apps with Deno using features like ESM, dynamic imports, HTTP imports, and import maps with no transpilation or bundling required.

React Material Admin: A Dashboard Template Built with Material UI — Originally a paid-for commercial template but now open-sourced. Take note that it’s based on older versions of some libraries.

The First Newsletter Dedicated to Product Engineers — The fastest growing startups increasingly rely on product engineers. They can both figure out what to build and actually build it. Product for Engineers is dedicated to sharing the skills and strategies needed to succeed in this role.

Why Did You Render: Patches React to Notify You About Avoidable Re-Renders — Can be used to optimize re-renders in your React app or just to track when and why components are re-rendering. v10.0 now supports React 19 (though the author, now a member of the React team, says it’s incompatible with React Compiler optimized apps).

☎︎ react-international-phone: A Phone Number Input Component — Not only can you pick a country, it can also guess the country from a number, where possible. react-phone-number-input is another option in this space.

React Select 5.10: A Flexible Select Input Control — Supports things like option groups, portals, animations, multiselect, and autocompletion. Accessible too. There are plenty of examples on the homepage to check out. (GitHub repo.)

React-Reverse-Portal 2.2: Build An Element Once, Move It Anywhere — Reverse portals do the opposite of usual portals (which let you send the rendered output of an element to a DOM node of your choice) .. so you can pull rendered elements from elsewhere into a location within your React tree.

SRCL: Build React Apps with 'Terminal Aesthetics' — The homepage is a live demonstration of what SRCL has to offer. It’s a suite of React components and styling to recreate a monospaced, terminal-like atmosphere