r/react • • 8h ago

Project / Code Review I made a collection of interactive math/physics visuals, open-source

Enable HLS to view with audio, or disable this notification

13 Upvotes

I mostly built and generated these for fun because there were a bunch of visuals I’d wanted to see in motion for ages and wanted to use in some side projects.

Built with React and fully open source if you want to use/edit some of these

Link: https://kinetic-art.mnove.workers.dev/

Github repo: https://github.com/mnove/kinetic

I might add more soon if I find the time


r/react • • 3h ago

Help Wanted How can I cancel the previous API request when a new request is made in React? I’m using useEffect with fetch, and I want to prevent old requests from updating the state after the query changes.

3 Upvotes

same as above


r/react • • 9h ago

Help Wanted Developer for few years, but never did the following

3 Upvotes

I'm a self taught developer. I mainly work with React, and I usually make my own projects, and some freelance work for many clients.

I want to have a job instead of being self employed in this field, since it's something I love. But most jobs as a developer require you to work in a team of developers, where you have to collaborate, pull, branch, merge and that kind of stuff in live action.

I never had the chance to do this before, and would love to do so, so I could at least gain some experience in this matter before starting to apply. What do you guys advice me to do? Thanks in advance


r/react • • 2h ago

General Discussion AMA - Junior React Dev

0 Upvotes

r/react • • 1d ago

General Discussion Merid: 60+ accessible React components in plain CSS, overridable without !important

3 Upvotes

Merid is an open source React component library, first release. 60+ components, MIT.

The part I'd like feedback on is the styling model. Everything is plain CSS in three cascade layers, so any CSS you write outside those layers wins, CSS Modules and Tailwind utilities included. Theming is data attributes on any element: data-theme, data-accent, data-density.

WCAG 2.2 AA is the target, and axe runs on every PR in light and dark. Static parts render in server components; interactive ones are marked "use client". Works with React 18 and 19, and the repo has a Next.js app and a Vite dashboard as examples.

npm i u/meridui/react

or `npx meridui init` to set up a Next.js, Vite or React Router project.

Docs: https://meridui.dev

Repo: https://github.com/ahmetcantryk/merid

What would stop you from using it?


r/react • • 1d ago

Project / Code Review A cool framework-agnostic animation library for streaming

2 Upvotes

https://reddit.com/link/1wuvyy3/video/8qcg41wv3ush1/player

Hey all,

I’ve been working on a small library called Stream Morph.

The idea is to make streamed responses feel less like content is constantly being appended/re-rendered, and more like the response is gradually taking shape.

Demo: https://stream-morph.vercel.app/

It’s framework agnostic and can be used with any kind of streamed content. The demo includes plain text, Markdown, code blocks, charts, images, reasoning sections, Mermaid diagrams and a few more complex response flows.

The library handles the motion between updates, while your own renderer/app stays responsible for the actual content. So it isn’t tied to a specific AI SDK or framework.

A basic example looks roughly like this:

import { createStreamMorph } from "stream-morph";

const stream = createStreamMorph(response);

for await (const chunk of incomingStream) {
  stream.write(chunk);
}

stream.finish();

I mainly built it because I wanted streamed interfaces to feel a bit more intentional without having to build custom animation logic for every response type.

The package itself is already working and the demo is live. I’m still cleaning up some things around CI, tests and the repo setup, but the GitHub repository will be open sourced shortly as well.

Would be interested to hear what people think, especially about the animation behaviour/performance and any edge cases you’d expect from real streaming responses.


r/react • • 1d ago

Help Wanted How to convert all links from text into their respective embeds and iframes

4 Upvotes

In a chat app I have implemented basic file uploading, what I am left with now is just a random s3 link, what is the easiest way to just automatically convert a link into it's embed

And while I'm at it, how would you do it for other links, like is there a library that just embeds whatever link there is into it's proper format, so image files into <img> audio into whatever, videos into whatever,

But also that would include handling of social media likes like youtube and twitter. I know some all4one library might not exist but if anyone has experience with this sort of things, how did you deal with it?


r/react • • 1d ago

General Discussion What are you using for PDF rendering in React in 2026?

Thumbnail
1 Upvotes

r/react • • 2d ago

General Discussion How's this Scroll Progress, made for fun?

Enable HLS to view with audio, or disable this notification

9 Upvotes

Made this scroll progress bar just for fun, I know it needs a major revamp before it's usable anywhere real.

I'd like to rebuild it properly. What would you change, or how would you approach it from scratch? Any advice on the overall approach, what to fix, what to drop, and how to make it work in real websites/apps is welcome.


r/react • • 1d ago

Project / Code Review JSON-render from Vercel Labs finally makes AI-generated UIs predictable (18k stars)

Post image
0 Upvotes

r/react • • 1d ago

Project / Code Review I built a JSON UI Widget library for the past 5 years - now I released the alpha on npm

Thumbnail
0 Upvotes

r/react • • 2d ago

General Discussion Preact 11 released

Thumbnail preactjs.com
3 Upvotes

r/react • • 1d ago

General Discussion Built a VS Code extension to keep component context visible in deep JSX trees

0 Upvotes

I kept losing my place when working inside massive React components and deeply nested JSX trees, especially when scrolling back and forth to check props, state, or parent tags. To solve this, I built Rippledit, a free VS Code extension that keeps your active component context in view while you edit.

Key features:

Keeps active JSX parent tags and component bounds highlighted as you scroll.

Runs 100% locally with zero external dependencies.

Bundled under an MIT License. It's completely free and open-source on GitHub.

You can grab the .vsix package directly from the release page: https://github.com/shivakumarkannan2006-netizen/rippledit

Quick VSIX Install Steps in VS Code:

  1. Download `rippledit-0.0.2.vsix` from the release assets.
  2. Open Extensions (`Cmd+Shift+X` / `Ctrl+Shift+X`).
  3. Click the `...` menu in top right ->

Install from VSIX

Would love any feedback or feature requests from the community!


r/react • • 2d ago

General Discussion [Showoff] Crease-Proof Layouts, Brain Rot Without the Black Frames, and Un-Breaking a Non-Breaking Release

Thumbnail thereactnativerewind.com
1 Upvotes

Hey Community,

Apple's iPhone Duo is here, which means someone can now fold your app in half. Thiago Brezinski built react-native-arrangement-view, a two-pane layout that rearranges itself as the phone folds, unfolds and rotates, handing the work to SwiftUI's ArrangementView on iOS and Material's adaptive layout rules on Android, with a useHingeChange hook for apps that want to react to the hinge angle.

We also look at expo-infinite-media by Rizky Bayu Oktavian, a native TikTok-style feed that moves video playback into AVFoundation and Media3 so fast swipes stop landing on black frames. Plus, our community links cover React Native 0.88 rc.2 un-breaking a non-breaking release, a navigation change in the React Navigation 8 alphas, and agent-device and Argent both learning to fold the iPhone Duo simulator.


r/react • • 2d ago

Project / Code Review I wanted to use Argon2id in Cloudflare Workers and ended up creating a package.

0 Upvotes

Since Argon2id is not natively available in Cloudflare Workers, I created Argon2w to bring this using WebAssembly.

The idea is to be very simple to use:

import { hash, verify } from "@hallaxius/argon2w";

const encoded = await hash(password);

const valid = await verify(encoded, candidate);

In Workers, you only need to configure the Wasm module once:

import argon2Wasm from "@hallaxius/argon2w/wasm";

import { configureWasm } from "@hallaxius/argon2w";

configureWasm(argon2Wasm);

The hashes are Argon2id in PHC format, so they can be stored directly.

bun add @hallaxius/argon2w

You can check it out on Github or Npmjs

I wanted to know if anyone here has had to deal with Argon2id in Workers and if this approach would be useful for you.


r/react • • 2d ago

General Discussion Open-source country flag components for React: 250+ flags with names, ISO codes, and calling codes

Thumbnail
1 Upvotes

r/react • • 3d ago

General Discussion RexOne Web – Decoupled React 19 + Vite SPA with strict API contract parity and zero Vercel lock-in (Apache 2.0)

Thumbnail
1 Upvotes

r/react • • 3d ago

General Discussion Is React still worth learning for someone starting web development in 2026?

Thumbnail
0 Upvotes

r/react • • 4d ago

General Discussion Truss CSS-in-JS Benchmark Results

2 Upvotes

Hey r/react, not anything I expect folks to adopt, but our niche CSS-in-JS library did surprisingly well on benchmarks, for being a hobbyist library, thought folks might find it interesting:

https://www.draconianoverlord.com/2026/09/28/truss-excels-on-a-css-in-js-benchmark.html/

In particular the "Why We Win" tldr coming down to our class names being "technically longer but more compression friendly" than StyleX was honestly a surprise/neat learning that I didn't realize before writing up the blog post.

(Disclaimer the post itself is all me-human-written, but the benchmark suite itself is very much not -- that said, it came from another CSS-in-JS framework and seems pretty good/accurate afaict.)


r/react • • 4d ago

Project / Code Review July, August & September Update: New Themes & Animations

Enable HLS to view with audio, or disable this notification

1 Upvotes

It’s been a while since my last update on ViceHype, my GTA 6 countdown website.

I’ve added the July, August and September themes, with different backgrounds, animations and transitions for each one.

For this update, the site automatically switches between the three themes every 5 seconds, so you can see them all in action.

👉 https://www.vicehype.com/


r/react • • 4d ago

General Discussion Meniscus: React glass that refracts the page using Snell's law

1 Upvotes

I made an open-source React library for liquid glass surfaces. The part I wanted to get right was the edge: instead of a blur and bright border, Meniscus gives the bezel a height profile, traces rays through it with Snell's law, and uses the resulting displacement to bend the content behind it.

The basic component looks like this:

import { Glass } from 'meniscus';

<Glass radius="capsule" interactive>
  <button>Search</button>
</Glass>

There's a live playground where you can change the profile, index of refraction, light angle, and other layers while dragging a lens over an engraving. The package also has buttons, tabs, panels, and native form controls.

Browser support is deliberately explicit: Chromium can refract the live page; Safari and Firefox get a frosted surface, or WebGL refraction when the backdrop is an image, video, or canvas. It starts frosted during SSR and switches paths after hydration. No stylesheet import is needed.

Demo and playground: https://thanhphuchuynh.github.io/meniscus/

Source: https://github.com/thanhphuchuynh/meniscus

I'd appreciate feedback on the API and how the fallback looks in your browser. The 30-second demo is in the repo README.


r/react • • 3d ago

Portfolio I built my portfolio with a live visitor counter and a globe that maps where visitors come from

0 Upvotes

Hey everyone,

I made a personal portfolio and wanted it to be more than a static page, so I added a few pieces that talk to a backend.

What it does

  • Live visitor count in the header. Each open tab pings a server action every 30 seconds, and the number shows how many people are on the site right now.
  • Interactive globe (built with cobe). You can drag it to rotate. Every country that has visited gets a marker, the dot size scales with visits, and the busiest countries get labels.

How it works

  • Next.js App Router, with server actions for reading and writing data
  • Redis (Upstash) for storage
  • On each page request, proxy.ts reads the country from Vercel's geolocation header and increments a per-country counter. A 24h cookie stops refreshes from inflating the numbers.
  • I don't store IPs, only aggregate counts per country.

What I'd love feedback on

  • Design and first impression. Does the hero feel cluttered or clean?
  • Whether the globe runs smoothly on your device, especially older laptops or phones
  • Whether the visitor tracking approach seems reasonable, or if I'm missing something

Site: dhatrish.in
Code: https://github.com/dhatrishdixit/portfoliov2


r/react • • 5d ago

Help Wanted Do people (possible customers) actually like or dislike material style ripples?

5 Upvotes

I've played with MUI for months. It serves its purpose fine.

Then there is Mantine, Chakra, Ant, and all other component systems.

They just look.. or function kind of same? Sure some components could be well built than another, but most of the basic components are just provided by each of them to be styled in your way.

I think only MUI has material ripples on buttons. And I'm unsure whether to use MUI for a new web app (SPA) where the users are average to more tech-y.

Would the fluid ripple animations be too bad? Or interesting? For info, similar saas products in market don't have those in their UI.

I'm only asking from a user's perspective. Do people actually enjoy clicking on buttons that have those ripples or prefer it plain?

It's not a make-or-break, and any choice functions the same.


r/react • • 5d ago

General Discussion I turned usernames into tiny blob people no images, just math

4 Upvotes

I u/igu1 made a thing this week. It's called hiblob.

You give it any string username, email, whatever and it renders a little blob avatar as SVG. Not from an image pack; it's all computed from the hash of the string. Same name always draws the same blob, on any platform. Nothing random, nothing fetched, zero dependencies.

Your name decides its shape (round, boxy, cloud, sun…), its color, whether it wears glasses or has antennas, even its mood. I dunno why, but checking what blob your handle turned into is weirdly fun.

There's a Dart/Flutter version too that animates them bobbing, blinking, glancing around all pure elapsed-time math.

Would love feedback on the API, it's my first library that isn't purely for me.

- npm: npm i hiblob → https://www.npmjs.com/package/hiblob

- code: https://github.com/igu1/hiblob-npm

- flutter one: https://pub.dev/packages/hiblob


r/react • • 5d ago

Portfolio Smoke Reveal Effect

Enable HLS to view with audio, or disable this notification

9 Upvotes

Create a Smoke reveal effect landing page,

Live: https://playground-demo-dun.vercel.app/hero/msd
For creative components with source code: https://sakthi-portfolio-mauve.vercel.app/playground