~reactstatus | Bookmarks (138)

Solito 4.3: A Way to Use React Native with Next.js — A wrapper around React Navigation and Next.js that lets you share navigation code when building cross-platform apps. v4.3 now supports React Navigation v7.

Satori 0.12.0: Convert HTML and CSS to SVG — Designed to be used with React and JSX. It doesn’t support all HTML but is designed to provide a familiar way to generate images from code (such as for Open Graph graphics, say).

React Scan: Detect Performance Issues in Your App — A pure JavaScript tool you can drop into your app to automatically ‘scan’ for problematic renders without doing lots of integration work. There’s a simple demo on the homepage or you can see Aiden’s view of Twitter/X being scanned. GitHub repo.

Payload 3.0: A Headless Next.js-Native CMS Platform — An open source, headless CMS with a customizable React-based admin system, GraphQL and REST APIs, flexible auth, file uploads, etc. “Payload is the only Next.js CMS—in a way that no other CMS can come close to,” they claim. GitHub repo.

Introducing @clerk/nextjs V6, with Support for Next.js 15 — With v6, the auth() helper is now asynchronous, <ClerkProvider> defaults to static rendering instead of dynamic, and support for partial pre-rendering has been introduced. Learn more about v6 updates and follow our guide to upgrade.

Uncontrolled or Controlled: A Matter of Perspective? — Controlled components have state managed by React, while uncontrolled components store their state in the DOM, but sometimes it’s a bit more complicated than that, as Sam demonstrates here.

Building React Forms with Ease Using React Hook Form, Zod and Shadcn — I exaggerate, but it seems there are almost as many ways to create forms in React as there React developers, but here’s one developer’s clean, modern approach.

▶  A Look At “use cache”, Next.js's Latest Take on Data Caching — Explained in Jack’s usual tight, expertful fashion. (17 minutes.)

Minimal Pie Chart: Versatile, Lightweight SVG Pie and Donut Charts — Pass in your data and colors via props, and you’re done. Demos here. Could be handy if you don’t want to pull in an entire full-scale charting library as it comes in at under 2KB gzipped.

🤖 Vercel's AI Chatbot Starter Template — An open source AI chatbot app template built using Next.js. It uses Vercel’s AI SDK and other Vercel APIs for the heavy lifting.

react-svg 16.2: Component to Inject SVG into the DOM — Rather than embedding SVG with img or an iframe or even CSS, you can get more control by putting SVG directly into the DOM.

💰 React Currency Input Field Component v3.9 — A component that aims to capture the nuances of currency input, if a freeform approach doesn’t cut it for you. Try it out with the live demo.

Framer Motion is Now Motion — Framer Motion has been a long-standing, powerful, and hugely popular library for animating things in React apps, but it’s now called Motion and has become an "independent open source project for the community", separate from Framer as a company.

How to Set Up Next.js 15 for Production in 2024 — Share in this author’s experience in scaling up Next.js apps to over 100k monthly active users and millions of monthly visitors.

Ship Code Confidently When You Take Testing Fundamentals — Join Steve Kinney for this video course on test-driven development workflows and nail the testing fundamentals. You'll learn about automation, equality, mocks and spies, integration testing, the tools to help you along the way, and much more.

Storybook 8.4 Released — The popular frontend component workshop gets a minor release but it’s “one of our most feature-packed minor releases ever” with one click component testing, Svelte 5 support, React Native Storybook 8, and other niceties.

Make dangerouslySetInnerHTML Safer by Disabling Inline Event Handlers — How to begin to neutralize the threats when you need to wield this feature.

▶  From Next.js to htmx: A Real World Example — An interesting case study explained in a 50-minute screencast: “Replacing my components with the equivalent HTML elements powered by htmx wasn’t exactly an easy task, but one that was worth the time.”

React Query Builder 8.0 — A customizable query builder component, along with a collection of utility functions for importing from, and exporting to, various query languages like SQL, MongoDB, and more.

React Native Godot: Bringing the Godot Game Engine to RN — If you’ve been waiting for Godot, the popular open source game engine, to be brought into React Native apps, here’s an early attempt to check out. (iOS only for now.)

🗓️ Schedule-X 2.5: Material Design Calendar and Date Picker — Available in the form of React/Preact, Vue, Svelte, Angular, or plain JS components. Open source but with a premium version with extra features. GitHub repo.

Formity: Library to Build Dynamic Multi-Step Forms with JSON — There’s a simple but effective demo on the page, which is constructed with a JSON-based syntax that uses loops, variables, and operators and can be stored anywhere.

Flex Your Product Muscle with Product for Engineers — Product for Engineers is PostHog’s newsletter helping engineers improve their product skills. Subscribe to get curated advice on building great products, lessons (and mistakes) from building PostHog, and dives into the strategies of top startups.

Creating a Full-Stack App with Go and React — A look at bringing together the best of the front end and back end into a single app, a contrived ‘Go Eats’ food ordering service.