~reactstatus | Bookmarks (136)

💰 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.

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.

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.

<ClickToComponent />: Quick Access to Component Source Code — Option+Click React components in the browser to open the source in VS Code. Additionally, Option+Right-Click opens a context menu with the parent component’s props, file name, column number and line number.

Docusaurus 3.6: The Docs-Oriented Static Site Generator — We remain huge fans of Meta’s Docusaurus, a popular way to build and deploy, largely, technical documentation sites (like all these). v3.6 is a performance focused update and it now uses tools like Rspack, SWC, and Lightning CSS to make the build process faster than ever.

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.

React GJS Renderer: A React Renderer for GNOME JavaScript — One for anyone developing desktop apps for Linux, as this lets you use React in the building of native Gnome GTK applications by way of the GJS (GNOME JavaScript) environment (think a runtime akin to Node.js but for GNOME desktop apps and powered by SpiderMonkey).

▶  What's Next for the React Compiler? — React Compiler is now in beta and at a recent React India event, a core team member gave a quick update on what’s been improving with the compiler and the next steps in its development. (19 minutes.)

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.

How to (Not) Reset a Form After a Server Action in React — “There was a period when forms didn’t reset automatically (...) Recently, the forms started resetting automatically, and now everyone wants to know how to keep them intact in case of a (validation) error.”

How Shopify Built its Black Friday 2023 Globe — Shopify’s busy getting ready for 2024’s Black Friday season, but takes the time to explain how they built last year’s striking sales visualization using Three.js and React Three Fiber. Admittedly, shaders did most of the heavy lifting, rather than React.

How to Create an AI-Powered Newsletter Aggregator with React and AI Agents — Oh no! Surely you wouldn’t want to do that.. 😅 Nonetheless, it’s cool to see the KaibanJS agent building framework in action.

React-Ace: Integrate the Ace Editor into React Apps — Ace is a long-standing code-focused editor control for the Web. Here’s a quick demo.

Sonner 1.7: The Opinionated Toast Notification Component — Styled by default but customizable. There’s a live demo to try on the homepage, or hit up the GitHub repo. v1.7 focuses on animation improvements, browser support tweaks, and React 19 support.

Master Performance and Speed Up Your Site — This detailed video course shares the fundamentals of web performance, covering key Core Web Vitals metrics such as Cumulative Layout Shift (CLS), and Interaction to Next Paint (INP). You'll learn how to best use Lighthouse, WebPageTest and other tools in order to make your site lightning.

Next.js 15 Released — Last week was a big week for the popular (some may even argue default?) React framework with Next.js Conf taking place (more on that later) and this major release. It includes a codemod CLI for easier upgrading, async request APIs, alignment with React 19, and more.