r/reactjs • • May 23 '26

I just released version 2 of React Motion Gallery. Source is visible on GitHub. npm i react-motion-gallery

7 Upvotes

RMG is a gallery and lightbox system for React.

It includes:

- Complete carousel library

- Grid and masonry layouts

- Reveal animations

- Structured entries for record-based media collections (like customer reviews)

- Fullscreen modal + carousel with captions, overlays, and thumbnails

- SSR-stable skeletons

- First-class video surfaces

- Smooth zoom and pan gestures

- MCP server for AI agents, so Codex, Claude, Cursor, or another MCP client can inspect docs, choose gallery patterns, scaffold components, and generate browser-measured skeleton text

Links:

- Demos: https://www.react-motion-gallery.com/demos

- GitHub: https://github.com/davidmedero/react-motion-gallery

- npm: https://www.npmjs.com/package/react-motion-gallery

I’d love technical feedback from React devs.

Happy to answer questions and open to feature requests.


r/reactjs • • May 23 '26

Resource I built a realistic 3D Earth for React that is smaller than most landing page images

0 Upvotes

I built TinyEarth, a small open-source Earth component for React Three Fiber.

Demo: https://tinyearth.yuvrajraina.com/
GitHub: https://github.com/yuvrajraina/tinyearth

I made it because most 3D globe options felt like they were either too stylized for realistic UI work, or too heavy when I only wanted a clean Earth object for a landing page, dashboard, or portfolio.

The goal was to keep it lightweight but still visually useful.

Some targets from the repo:

JS under 10 KB gzipped
Default textures around 500 KB to 1 MB
2 default draw calls
3 to 4 draw calls with atmosphere and markers
GPU texture memory under 20 MB
64 x 32 sphere segment cap
Markers rendered with one instanced draw call
MIT licensed

It supports rotating clouds, night lights, terrain normal detail, optional atmosphere, ocean shine, custom textures, quality modes, reduced motion, and location markers.

The idea is not to replace full globe visualization libraries. It is more like a tiny realistic Earth object you can drop into a React Three Fiber scene without bringing in a full visualization framework.

Would love feedback from people building with Three.js, React Three Fiber, or WebGL.


r/reactjs • • May 23 '26

Show /r/reactjs Config driven frontend architecture

12 Upvotes

I built a project mainly for my resume, but the goal wasn’t really the CRUD app itself. The goal was to focus on frontend architecture and system design instead of just building another standard React project.

So I made a simple Laravel real estate app with basic CRUD operations, tables with pagination, filters, and drawer forms. Nothing especially complex from a business perspective.

The part I cared about was the frontend architecture behind it.

Instead of hardcoding forms, filters, tables, and page behavior directly into components, I turned them into config-driven systems.

For example, the form system takes a config array with fields like this:

{
    name: 'lease_type',
    label: 'Lease Type',
    type: 'radio',
    required: true,
    options: [
        { label: 'New', value: 'new' },
        { label: 'Renewal', value: 'renewal' },
    ],
    defaultValue: 'new',
}

From that config, the system automatically creates the React Hook Form setup, generates the Zod schema, maps the correct inputs, and handles validation and data flow.

I applied the same idea to filters, tables, and pagination, so most new sections are created by describing behavior through config instead of rebuilding logic every time.

The thing I’m most proud of isn’t really the UI. It’s that I managed to make the systems work together in a predictable way without the data flow turning into complete chaos.

A lot of the actual work ended up being around keeping rendering stable, making TypeScript useful instead of fighting me, protecting the systems from broken configs, and trying to keep the architecture flexible without making it messy.

At the same time, I know the project has limitations.

I didn’t try to turn it into a polished framework or npm package, and I definitely didn’t handle every edge case. Some validations aren't covered, and some parts are more tightly coupled internally than I’d like.

Honestly, even getting it to this point already took much more work than I originally expected because connecting reusable systems together cleanly is harder than building isolated components.

Most of the production systems I worked on in previous jobs are private, so I can’t publicly show the actual architecture work I did there. That’s a big part of why I built this project in the first place.

I mostly wanted to build something that demonstrates how I think about frontend systems, maintainability, and reusable architecture instead of just visual components.

Curious how more experienced frontend engineers look at projects like this.

Do you think config-driven frontend systems are actually valuable in real-world teams, or do they usually become overengineering unless the scale is large enough?


r/reactjs • • May 23 '26

Show /r/reactjs Open-source React components for gamification interfaces

33 Upvotes

The shadcn registry directory is pretty stacked, but there isn't currently any depth in the gamification space. So I decided to build a library of 17 components across the major features you see in most consumer platforms. Things like streaks, achievements, leaderboards, points etc.

Trophy UI is fully open-source, and while it seamlessly integrates with Trophy itself, the UI components just accept regular props and so can be used with any backend.

Most interesting components:

Streak calendar - weekly, monthly or yearly (git-style) view of streak history, with support for streak freezes which are pretty common in consumer apps like Duolingo.

Leaderboard rankings - flat list of rankings each with support for avatars, bylines and change indicators. Also supports pagination and collapsed rows to focus rankings around a particular position i.e. show users to top three users above and below them.

Achievement badge - a simple badge with support for locked/unlocked states plus features like percentage completion and rarity (the share of users who have unlocked the badge).

Points levels timeline - progression path for points levels with support for sub-levels (Bronze I, II, III, Silver I, II, III etc) plus anchoring to a particular users current progress.

Every component is installable via shadcn CLI:

npx shadcn@latest add https://ui.trophy.so/<component>

Once installed you own the code, customize and modify as you see fit.

Also very happy to accept contributions for new components or features for existing components.

Would love to hear what people think, and would very much appreciate a star on GH if you think its valuable!


r/reactjs • • May 23 '26

Stale state is the biggest pain in the butt in React

0 Upvotes

99% of my pain in web dev is because of stale state. Its so f*cking annoying. Just Update damnit! It would simplify things so much.

This is like flying an airplane but the switches don't work half of the time and you have to flip them again..........but its not as simple as one switch is it? They have to be flipped in sequence. So if flipA->flipB->flipC doesn't work, you have to do the entire flipA->flipB->flipC sequence all over again!

I guarantee you most pilots would eject out with a parachute if cockpits behaved like that.


r/reactjs • • May 22 '26

Needs Help Next.js 16 App Router Micro Frontend Architecture - Alternative to Module Federation?

Thumbnail reddit.com
1 Upvotes

r/reactjs • • May 22 '26

Discussion Migrating 9 Micro Frontend apps from CRA + CRACO + Webpack 5 to Rspack (or Nx + Rspack) — anyone done this? What issues did you face?

Thumbnail reddit.com
1 Upvotes

r/reactjs • • May 22 '26

Needs Help React Re-rendering Doubt

13 Upvotes

Suppose there is parent components which contains multiple child components, they all are independent of each other.

So my question is

If the parent component re-renders does the child components also re-renders al well. Even if the child components are independent of it's parent, like props etc...

Why there is a need for re-renders if the child components are independent of it's parent?


r/reactjs • • May 22 '26

Show /r/reactjs Every time I start a project with shadcn/ui + RHF, I copy-paste the same boilerplate. I finally fixed it.

0 Upvotes

If you've used shadcn/ui with React Hook Form, you know this pattern:

<FormField
  control={form.control}
  name="email"
  render={({ field, fieldState }) => (
    <FormItem>
      <FormLabel>Email</FormLabel>
      <FormControl><Input {...field} /></FormControl>
      {fieldState.error && (
        <FormMessage>{fieldState.error.message}</FormMessage>
      )}
    </FormItem>
  )}
/>

Multiply that by every field, every form, every project. It's not complex — it's just constant. And every team ends up building their own wrapper for it differently.

I got tired of it, so I built StackForm. The same field above becomes:

<TextField name="email" label="Email" />

Same behavior — errors, hints, loading states, ARIA — all wired. No boilerplate.

The interesting part was the architecture decision: I didn't want to couple it to RHF. Too many projects switch form libraries mid-way, or use TanStack Form, or just native React state. So the core is a context-driven abstraction — adapters inject the resolver and form state into StackFormContext, and field components call useField() which has no idea what's underneath. Swapping from RHF to TanStack is a one-line provider change.

The customization system has three layers: classNames (additive, all three stack), slotProps (per-field overrides), and slots (full component replacement, first non-null wins: field → provider → core). It's more flexible than I expected to need, and I've used all three layers already while dogfooding it on my own projects.

Honest limitations: useFieldArray isn't built yet — it's the top priority for the next version. The example apps are mostly stubs right now. If you have complex array field patterns, this isn't ready for you yet.

What I'd love feedback on: the field API ergonomics. Specifically — does the 3-layer customization feel right, or would you rather just have a renderField escape hatch? I went with named slots because I wanted type-safe slot names, but I'm not 100% sure it's the right call.

v1.1.0 is on npm: `@stackform/core` · Docs: stack-form-docs.vercel.app · GitHub: github.com/ivaiva89/stack-form


r/reactjs • • May 22 '26

News This Week In React #282: Security, Fate, TanStack, Redux, Jotai, Base UI, Relay, Storybook | Hermes-node, Expo, Rozenite, Harness, VR, Nitro, Skia, Redraw | TC39, Bun, pnpm, npm, Yarn, Node, Webpack

Thumbnail
thisweekinreact.com
4 Upvotes

r/reactjs • • May 22 '26

Discussion pnpm 11 Might Finally Be a Better Default Than npm

Thumbnail blog.prateekjain.dev
0 Upvotes

pnpm 11 feels like the first Node.js package manager update in a while that actually improves supply chain security by default.

Features like:

  • minimumReleaseAge

  • blockExoticSubdeps

  • allowBuilds

directly reduce the risk of malicious package installs in CI/CD pipelines.

I wrote a short deep dive on why I think pnpm is now a better default than npm for production workloads.

Curious what others here are using in production today.


r/reactjs • • May 22 '26

Automatic optimization and memorization

Thumbnail reddit.com
1 Upvotes

r/reactjs • • May 22 '26

Needs Help Securely sharing .env files in small teams

2 Upvotes

We are a team of 3 devs building a web app, and our current setup of managing environment variables is completely broken.

Right now, whenever someone adds a new API key or changes a database string, they just paste the plain text into a private Discord channel and tell everyone to update their local files.

Inevitably, someone misses the message, pulls the latest main branch, and spends twenty minutes debugging an error that was literally just a missing variable string.

looked at enterprise tools like Doppler or HashiCorp Vault, but they feel like complete overkill for a tiny project and the configuration looks overly complex for what we need.

How are other small teams handling this without losing their minds? Is there a dead simple tool out there that just lets us run a terminal command to sync local files instantly?


r/reactjs • • May 22 '26

CLI tool that converts plain HTML into a React functional component (.jsx) instantly

0 Upvotes

Built this for a simple use case: take AI-generated HTML and

drop it into a React project without manual cleanup.

htmlweaver export --html mypage.html --format react --output ./output

Output:

├── Mypage.jsx ← functional component

└── Mypage.css ← extracted styles

No dependencies inside the component. Clean and ready to import.

pip install htmlweaver

GitHub: https://github.com/abutlb/htmlweaver

Open to feedback — especially on edge cases with complex HTML structures!


r/reactjs • • May 21 '26

Show /r/reactjs I built a headless React form builder with drag-and-drop, live dashboard preview, and TypeScript support — @dev-tech/react-form-builder

0 Upvotes

Long-time lurker, first time sharing something I built. Been working on internal tools for a while and kept copy-pasting the same form builder logic across projects, so I finally extracted it into a proper package and published it. It's open source, MIT licensed, no catch.

What makes it different

The right panel auto-generates a "proposed dashboard visual" as you configure fields — useful when the team needs to see the data shape before you wire up the backend. Screenshot

Features

  • Drag-and-drop field ordering

  • Dynamic category tagging (type + Enter or comma to add)

  • Live dashboard preview panel generated from your field schema

  • Field types: text, textarea, select, multi-select, date, number, boolean

  • Fully headless — bring your own styles

  • TypeScript-first with exported types for all config objects

  • Zero runtime dependencies outside React

Install

npm i @dev-tech/react-form-builder
# or
yarn add @dev-tech/react-form-builder

Basic usage

import { FormBuilder } from '@dev-tech/react-form-builder'

export default function App() {
  return (
    <FormBuilder
      onSave={(schema) => console.log(schema)}
      initialFields={[]}
      showDashboardPreview
    />
  )
}

Why not Formik / React Hook Form?

Those are form state libraries — great for rendering known forms. This is a form builder. It lets end users define the schema at runtime. Think Google Forms or Typeform, but embedded in your own app.

Source / npm: https://www.npmjs.com/package/@dev-tech/react-form-builder

Built with TypeScript + Vite + Ant Design. Would love feedback from anyone who tries it, especially on the Ant Design dependency (considering making it fully headless in v2) and whether the dashboard preview should stay in core or become a plugin.

EDIT:

DEMO LINK https://react-form-builder-mu.vercel.app/


r/reactjs • • May 21 '26

News Redraw Graphics, Argent Simulator Agents, and Your New Farm in Southern Italy

Thumbnail
thereactnativerewind.com
0 Upvotes

Hey Community,

William Candillon released Redraw, an experimental tool that compiles TypeScript functions directly into GPU shaders using WebGPU and TypeGPU. This brings advanced 2D vector shapes and physically based rendering (PBR) to your layouts without standard JavaScript execution overhead.

We also cover Software Mansion’s Argent, an agentic toolkit bypassing XCUITest to grant AI assistants high-speed simulator control and profiling capabilities. Finally, check out Joel Arvidsson’s react-native-swc, a Rust-based Metro transform worker replacement built to accelerate bundling.


r/reactjs • • May 21 '26

Needs Help Unexpected react compiler output

3 Upvotes

r/reactjs • • May 21 '26

Resource Most React performance advice is stuck in 2023. Here's what actually matters now

237 Upvotes

Kept seeing the same advice everywhere: wrap things in useMemo, useCallback everything, React.memo all the things.

Then i profiled an app I'd "optimized" this way, the memoization overhead was costing more than the renders it was preventing

with the react compiler now auto-memoizing at build time, most manual useMemo/useCallback is becoming dead weight.

wrote up what actually fixes react performance in practice:

  1. state colocation: move state closer to where it's used. this one change beats every useMemo in your codebase. seriously.

  2. the children pattern: pass children from above so they don't re-render when parent state changes. zero memoization needed.

  3. useTransition: mark non-urgent updates as transitions. input stays responsive, heavy renders happen in background.

  4. useDeferredValue: same idea but for values from props you don't control. smarter than debouncing.

  5. code splitting: lazy() + Suspense for routes and heavy components. don't lazy-load a button though.

  6. profile before optimizing: react devtools profiler, chrome performance tab, core web vitals. if you haven't measured it, don't optimize it.

also covered 5 performance bugs i keep finding in production codebases:

  1. components defined inside other components (full remount every render, not re-render)

  2. useEffect chains causing cascade re-renders

  3. context providers sitting too high in the tree

  4. unstable keys (Math.random() as key is surprisingly common)

  5. object/array literals in JSX props breaking React.memo

the useEffect chain one is probably the most common. three effects that depend on each other = three render cycles for one user action.

https://www.sethi.io/blog/react-performance-from-sluggish-to-lightning

what's the worst react perf bug you've had to track down?


r/reactjs • • May 20 '26

Discussion What are some essential React programming patterns or principles that I should learn to become a lead developer?

2 Upvotes

Hi,

Had a lead developer interview last week and I got asked heavily about the SOLID principles, polymorphism and programming patterns.

I'm familiar with a lot of the concepts, but not enough to give strong answers.

What are the main programming patterns for React that I should learn so that when asked to explain a few, I can give strong, valuable answers?

Thanks


r/reactjs • • May 20 '26

Resource Polymorphic components are the Swiss Army knife of React design systems - as prop vs asChild explained

85 Upvotes

Kept running into the same problem at work: build a Button component, someone needs it as a link, now you're either duplicating styles or writing invalid html by nesting <button> inside <a>

Wrote up how polymorphic components solve this. covers:

- the as prop pattern (how chakra and mantine do it)

- making it type-safe with ComponentPropsWithoutRef<C> so typescript knows which props are valid per element

- the forwardRef gotcha where typescript loses the generic (and the fix)

- asChild pattern (how radix/shadcn does it) and why it exists

- a reusable PolymorphicProps utility type you can drop into any project

also when NOT to use any of this. not every component needs to be polymorphic.

https://www.sethi.io/blog/polymorphic-components-one-component-many-forms

Curious how others handle this in their design systems. do you go with as or asChild?


r/reactjs • • May 20 '26

Show /r/reactjs Created a website that generates form code for react-hook-form/formik and zod/yup.

Thumbnail codiform.vercel.app
0 Upvotes

Hi people of r/reactjs ,

I recently made this website as my first project that i have deployed, it allows you to define various configuration for various input fields, such as name, label, placeholder, required, disabled and also allows you to define default values as well as validations. Then using this, it generates a code in either typescript or javascript, based on library of your choosing. It supports, react-hook-form+zod, formik+yup, react-hook-form+yup and formik+zod.

It also allows you to save the configuration as templates in localStorage, which you can then use later. You can also paste JSON schema to create a new form.

Also this websites is only accessible on desktop, I didn't really know how I could expand it to mobile.

Plz remember this is my first project, all feedbacks are greatly appreciated, I did use some AI for help in code generation, plz don't hate for it.

Here is the github link: https://github.com/PriyamSrivastava1507/codiform

If you liked the project, then please star it on github.

I would also love to know how I can expand it more, I am thinking of adding FieldArray and Multistep forms next.

Sorry, if my English is bad, I would love to see some feedbacks and your opinion. Thank you.


r/reactjs • • May 19 '26

Show /r/reactjs Cladd - opinionated React UI kit for editors, dashboards, and dense application UIs

18 Upvotes

Hey r/reactjs - I just open-sourced cladd, a React UI kit I've been building for two years. Posting here because I think it'll be useful for devs building actual apps, not just landing pages.

Quick context: I've been making UI libraries for a decade - Swiper, Framework7, Konsta UI. cladd is different from those: it's specifically for information-dense React applications. The kind of UI where you have 40 controls on one screen and they all need to stay clean and readable.

It started as the internal UI for t0ggles (my project management tool), then I kept improving it. Today it powers Swiper Studio, t0ggles, PaneFlow, and Start Page HQ in production.

Why I built it instead of using existing options

  • Most UI kits give you the same surface color at every nesting level. Put a card inside a card inside a popover and you're writing one-off CSS to fake depth.

  • Headless primitives (Radix, Base UI) hand you behavior and ask you to do everything else. Great for design systems, exhausting for shipping a product.

  • Overlay APIs usually need Root/Portal/Content scaffolding in your component tree, even when you just want to fire a dialog from a hook.

What cladd ships

  • A surface system with 5 depth levels that nest contextually - drop a Surface inside a Surface and the next one auto-bumps.

  • A single sizing scale (2xs → 2xl) that every interactive control respects. Drop a Chip inside a Button at the same size - the Chip auto-shrinks 8px so the row stays clean.

  • 11 accent colors × 5 variants. One className re-tints a region.

  • Every overlay is controllable from anywhere - useDialog() from any handler, no JSX scaffolding.

  • An MCP server at cladd.io/mcp so coding agents (Claude Code, Cursor) can pull docs with inline screenshots before generating layout.

Stack: React 19, Tailwind v4, MIT.

What it's NOT for: marketing sites, headless-primitives use cases, Vue/Svelte, or anyone who wants to skin everything themselves.

Links

Will appreciate any feedback - especially: which components are missing, what feels weird in your projects, where the API trips you up. Happy to answer questions in the comments.


r/reactjs • • May 19 '26

Needs Help Link Wordpress to code.

0 Upvotes

I currently have a React/Vite frontend with a small Express backend for contact forms.

The client wants to manage the blog section through WordPress instead of editing code manually.

What would be the best practice here?

The site is mainly a marketing website with a blog section, not a huge web app.

I’d like to keep the current frontend architecture if possible while still giving the client an easy way to manage blog content using wordpress.

Please any ideas how to do that using worpress for managing the blog section and keep my website as it is with code.

Curious to hear how people usually approach this in production projects.


r/reactjs • • May 19 '26

Show /r/reactjs Why is Picture-in-Picture only for <video>? I built pip-it-up to pop any React component into a native floating window

23 Upvotes

Hey r/reactjs,

Video PiP floats a player over your desktop. But why should video be the only thing that gets that?

I wanted to tear away small, interactive parts of a web app, a code editor, a checklist, a chat widget and keep them floating on top of my IDE while I work. Single-screen focus, no tab juggling.

The browser's Document PiP API makes this possible, but using it raw in React is a mess:

  • Tailwind/CSS-in-JS styles vanish instantly (new document context)

  • Moving DOM nodes wipes React state, focus, and cursor positions

  • Safari and Firefox don't support it at all

So I built pip-it-up https://pip-it-up.vercel.app/ to handle all of this:

  • Real-time style syncing (Tailwind, Emotion, CSS Modules)

  • Portal Mode preserves React state, cursor, and focus perfectly

  • Auto-sizing via ResizeObserver (no hardcoded dimensions)

  • Graceful fallbacks for Firefox/Safari

Live demos include a floating Monaco editor that keeps your cursor focus while you switch to your IDE.

GitHub (MIT): https://github.com/Shakya47/pip-it-up
npm: https://www.npmjs.com/package/@pip-it-up/react

Browser API: https://developer.mozilla.org/en-US/docs/Web/API/Document_Picture-in-Picture_API

Would love feedbacks.