~reactstatus | Bookmarks (155)

Preview.js: Preview UI Components Instantly in Your IDE — Namely, VS Code or JetBrain IDEs, out of the box. Compatible with components built for React, Vue, Svelte and Solid.

⏱ React-Clock: An Analog Clock Component — There’s a beautiful Swiss train station style example on the homepage, but you can ultimately customize the clock to your liking.

form_props: The Power of Rails Forms Now in React Too — One for those working with React from Ruby on Rails. GitHub repo.

React Server Components in a Nutshell — A quick overview of RSCs that’s not focused around Next.js! Paul compares the approach taken by several frameworks before sharing his broader thoughts on the technology and why the small Waku framework is worth a look.

Introducing Waku's “Pages Router” — Waku (already mentioned above) is an interesting minimal server-side React framework and it’s now also bringing a minimal API to the modern React server components era: “Making a Waku site is now as simple as making a few files and folders in the ./src/pages directory”..

Product for Engineers: A Newsletter Helping Flex Your Product Muscle — 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 dive into the strategies of top startups.

Setting Up Storybook for React Components — How Dolt (love that name!) set up Storybook for their React component library including the use of Chromatic to test and review components.

TinyBase 4.8: A Reactive Data Store for Local-First Apps — A data store (for both key/value or tabular data) that can connect together data stores and act as a reactive backend to your apps. Basically, if you want less headache with the backend of your app, this is for you — and it includes bindings to React and pre-built reactive components, too. The demos show...

Docusaurus 3.2: React + MDX Powered Site Builder — If you’ve ever seen a smart, elegant docs site, there’s a 61% chance it’s powered by Docusaurus (citation needed) .. 😅 Maybe not quite, but if it’s good enough for React Native, Relay, Ionic, Jest, and many others, it’s good enough for us. v3.2 ups the ante with significantly faster site builds and a faster...

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 lots of adjustable settings!

use-local-storage-state: Like useState() But for Local Storage — A hook that persists data in localStorage while having an API similar to useState().

📺 react-tv-space-navigation: Spatial Navigation for TV Apps — “If you want to develop a TV app for AndroidTV + tvOS + web TV devices, then this package will be helpful. The library is based on LRUD, which is a UI-agnostic lib that represents spatial navigation.”

React Server Components Now in RedwoodJS — If you thought RSCs were a Next.js phenomenon, think again. Implementations are popping up all over, such as in Waku and now RedwoodJS, a full-stack framework founded by GitHub co-founder Tom Preston-Werner that leans on React, Prisma and other technologies to provide a great DX ‘out of the box.’ This post digs deep into how RSCs are...

Auth, Built for Devs by Devs — The best frontend language deserves the best auth service. Add MFA, SSO, biometrics and advanced threat detection with just a few clicks. Find out for yourself using our easy quickstart guide.

Deploying a React SPA and Python Backend Together on Azure — Last week, we saw how to roll out a full stack React app on Azure using Azure Functions, but what if you want something more traditional/monolithic like a Python-powered backend? Azure App Service can help with that.

How to Build a ChatGPT-a-Like with Clerk and AWS Bedrock — A thorough walkthrough whose focus is on the UI rather than the LLM/AI stuff behind the scenes which is taken care of by Amazon’s Bedrock service. Clerk handles the auth, while Next.js forms the base of the app.

Using ReactToPrint to Generate a Printable Document — Use ReactToPrint to add a print feature to your React app while preserving your document’s neat, consistent appearance.

React Horizontal Scrolling Menu 7.0 — A customizable horizontal scrolling menu component that’s responsive and can support numerous control approaches via scrollbars, touch, mouse wheel, etc. There are plenty of Storybook examples.

next-intl 3.10: Internationalization (i18n) for Next.js — If you want to internationalize your Next.js app, this is for you — you get a hooks-based, type-safe API with i18n and l10n features, internationalized routing, and React Server Components support. Apparently the main Node.js site uses it, too.

react-resize-aware: A Hook That Listens to Resize Events — Detect resize events on elements without relying on intervals, loops, DOM manipulation detection or CSS redraws. v4.0 now supports Vite.

use-hot-module-reload: Trigger a Callback After Hot Module Reloading — A hook that triggers a callback after hot-module reloading has been performed (for any module, not just the one it was used in) – works with Webpack and Vite.

MistCSS: Write React Components Using Only CSS — CSS-in-JS is old news.. what about JS-from-CSS? This new approach provides a way to compile CSS-only components into TypeScript for use with React – it’s early days, but an intriguing idea, at least. (Basic example.)

Looking Into the Type System of the React Compiler — If you’re not merely content to wait to see what the React Compiler will bring, but want to dig into the details under the hood, Sathya is here for you.

Building a React Login Page Template — This guide shows how to build a React login page and integrate it with an Express auth server using JWTs. It introduces Clerk as an easier option with pre-made UI components for authentication setup.