~reactstatus | Bookmarks (180)

Neobrutalism: A React Component Collection — We’re not sure so-called ne(o|u)brutalism is necessarily here to stay, but this component library is aligned with the trend which you’ll probably have seen here and there. GitHub repo.

Tailwind Next.js Starter Blog 2.0: A Starter Template for a Next.js Blog — This has been around a few years and has continued to be frequently updated and now uses the modern Next app directory approach along with server components – there’s a full explanation of the updates here. Is there a live demo? Yes. The post we just linked to is hosted on an...

Next.js 13 vs Remix: A Case Study — No mere lightweight list of feature bullet points, but an extended dive into the similarities and differences between two worthwhile approaches.

Optimizing the Use of Emotion in React — Learn how to optimize your use of Emotion in React applications. Understand the tradeoffs and potential drawbacks of using Emotion, and discover strategies to improve performance.

The Uphill Battle of Memoization — Two years ago, Dan Abramov wrote about things to do before you use memo() or usememo but Dominik goes a step further into exploring why memo shouldn’t be your very first choice for performance optimizations.

Test Your React Libraries Locally with Yalc — Yalc simplifies the process of working with and ‘publishing’ packages entirely locally so you can try things out without publishing to a remote, and potentially public, registry.

That’s Some Funky Stuff—Who’s Going to Work on That? — Solving strange, complex problems in legacy codebases is our specialty. Let’s make things more maintainable.

react-markdown: A Component to Render Markdown Documents — A long standing, extensible, and safe way to render Markdown that uses its own virtual DOM. Now requires React 18. GitHub repo.

Craft.js 0.2: A React Framework for Building Drag and Drop Page Editors — It’s a bold move to make the landing page for your project be a text editor itself, but we like it. GitHub repo.

nice-modal-react: eBay's Way to Manage Modals in React — A zero dependency way to manage modals in an idiomatically React way. You can play with some demos here.

ReactToPrint: Making React Components Printable — Provides a mechanism to let users print (yes, printing – though printing to PDF is also a thing) the contents of a component by popping up a new window and copying the styling across. There’s a live CodeSandbox demo.

React Native BLE PLX 3.0: Low Energy Bluetooth Library — ‘Bluetooth Low Energy’ is a technology used heavily in the wearable health and fitness peripheral space. This library opens up React Native integration with such devices (but, notably, not classic Bluetooth devices).

Gitify: GitHub Notifications From Your Menu Bar — If you get too many GitHub notifications, this desktop utility promises to bring them under control and collect them together in one place, whether on macOS, Windows or Linux. It's built using Node and React as an Electron app. Here's the source.

Upgrading Frontend Dependencies with Confidence — Tests often provide a way to see if the logic in our apps isn’t working the way we expect, but what about if a frontend component is rendering incorrectly? Visual regression testing to the rescue! Sébastien, well known for his work on Docusaurus, shares a workflow based on GitHub Actions, Playwright, and Argos (a commercial tool but with...

Insights For Developers, Gamified — Adadot gamifies the software development process giving each developer and team personalised recommendations on how to become the best. Collect all of the badges and showcase your experience with embeddable stats.

Best Practices for Developing Complex Form-Based Apps — Developing form-based apps using React Hook Form with an emphasis on the added benefits of incorporating TypeScript to enhance type safety and developer productivity.

Drawing on Google Maps with Drawing Manager — This incredibly thorough and code-rich followup to Integrating Google Maps in React focuses on the use of DrawingManager to draw polygons, rectangles, polylines, circles and markers on top of maps.

Build Your Own Chatbot with React and the OpenAI API — The AI is all provided by OpenAI, of course, but building your UI on top opens up some interesting opportunities.

Implementing Dark Mode in React Native — Supporting dark mode is more important than ever as users have come to expect it—this guide explains how.

Sonner 1.0: An Opinionated Toast Component — Styled by default but customizable. We’ve linked to it a few times this year but it’s just reached its 1.0 milestone. There’s a live demo to try on the homepage, or hit up the GitHub repo.

Sugar High: A Lightweight Syntax Highlighter for JSX — At just 1KB minified and gzipped, this is the sort of sugar high that’s not bad for you. GitHub repo.

The Postman VS Code Extension: Lightning-Fast API Testing and Collaboration — Develop and test your APIs in Postman directly from Visual Studio Code with the new Postman VS Code extension.

Sandpack 2.8: A Component Toolkit for Live Code Editing Experiences — Created by the folks at CodeSandbox who specialize in this area. Something to consider if you want to create interactive documentation, low-code tools, or the like. GitHub repo.

v0: 'An AI Tool That's Effectively Midjourney for React' — An interesting experiment from Vercel where you can submit prompts like “a pricing page for a SaaS” or “a contact form” and it returns copy-and-paste friendly shadcn/ui + Tailwind CSS code for React apps. It’s in “private alpha” behind a waitlist for now, but you can still take a good look around around other...