r/react

▲ 276 r/react+6 crossposts

I’ve been working on Tabularis, an open-source desktop database client for Postgres, MySQL and SQLite.

It’s meant to be two things at once: a comfortable everyday SQL app (editor, notebooks, charts, visual tools) and a safe bridge for AI agents that want to read your schema or run queries, without you having to paste credentials into a chat.

Free, open source, runs locally. Would love your thoughts.

https://github.com/TabularisDB/tabularis

https://tabularis.dev

u/debba_ — 16 hours ago
▲ 5 r/react+4 crossposts

I built a browser-based collage maker — and learned that "Save" silently does nothing on phones

freecollageimage.com — a collage editor that runs entirely client-side. Photos are decoded, laid out and exported in the browser; nothing is uploaded. Vanilla JS and canvas, no framework, and it's also wrapped with Capacitor for the Play Store and App Store.

The part worth sharing here isn't the editor, it's the save step, because it broke in a way I couldn't detect from the code.

An anchor with the download attribute pointing at a data: URL works in every desktop browser. In an Android WebView it does nothing — no download manager is attached unless the host app wires one up, so the navigation is silently dropped. iOS Safari refuses download on data: and blob: URLs from a synthetic click. Neither throws, neither logs, there's no rejected promise to catch. The function just returns and the file never appears.

That's what made it expensive: there is no `if (downloadWorked)`. Chrome DevTools device emulation happily pretends it worked. You only find it by holding a phone. Mine was dead on mobile for months and nobody reported it, because a button that does nothing reads as user error rather than as a bug.

Two different fixes. On Android, a native Capacitor plugin writes the bytes to storage. On iOS, navigator.share({files}) — and there the catch is transient user activation: an await consumes it, so the base64 → File conversion has to be synchronous. fetch(dataUrl).then(r => r.blob()) and canvas.toBlob() both lose the gesture and the share sheet is dismissed without a word. The ugly charCodeAt loop exists purely to stay inside the handler.

The compromise I'm still not happy about: on iOS the user taps "Save" and gets a share sheet where "Save Image" is one option among a dozen apps. It isn't a download and doesn't look like one.

Happy to go into either fix.

u/FunnyPhotos_1 — 18 hours ago
▲ 20 r/react+3 crossposts

Create Beautiful Animated Mockups in Seconds

Hi! I’m the dev behind PostSpark, a tool for creating beautiful image and video mockups of your apps and websites.

I recently launched a new feature: Mockup Animations.

You can now select from 25+ frames & devices, add keyframes on a simple timeline, and export a polished video showcasing your product. It’s built to be a fast, easy alternative to complex motion design tools.

Try it out here: https://postspark.app/templates

I’d love to hear your feedback!

u/world1dan — 21 hours ago
▲ 9 r/react

How to lean react more deeply

Hello guys i am currently learning react from a yt course called chai aur react so how to learn after finishing this, what projects to makee and should i also go through the react docs and how many days should i give more to react before starting backend pls give some genuine help

reddit.com
u/Acceptable-Hold4921 — 1 day ago
▲ 14 r/react+1 crossposts

Create Beautiful Animated Device Mockups in Seconds

Hi! I’m the dev behind PostSpark, a tool for creating beautiful image and video mockups of your apps and websites.

I recently launched a new feature: Mockup Animations.

You can now select from 25+ devices, add keyframes on a simple timeline, and export a polished video showcasing your product. It’s built to be a fast, easy alternative to complex motion design tools.

Try it out here: https://postspark.app/device-mockup

I’d love to hear your feedback!

u/world1dan — 21 hours ago
▲ 0 r/react

Shadcn.io sucks, anyone having similar experiences?

Just bought pro for shadcn.io and im pretty astonished with how bad the page is.
The only thing we need is the Rich Editor but theres zero documentation on how to use it etc.

The only information you get is on how to connect your frickin local AI with their MCP...

The whole page layout is so bad, the whole docs are sprinkled with jumbotrons to buy pro (remember i already bought pro) and unlock other features.
It seems the whole page is just AI slop. Have i fallen for a scam?

Anyone else has similar experiences?
Am i just retarded?

u/Commercial_Echo923 — 1 day ago
▲ 15 r/react+8 crossposts

I made a free Skia UI library for RN UI components (buttons, panels, glass effects)

l kept struggling to find Skia shader components that were actually ready to drop into an RN app. most shader code out there isn't built for RN's Skia renderer at all. So l put together my own library. Some shaders are free, others are from artists who charge for their work

l know ShaderToy exists, but that's generic GLSL you'd have to manually port to SkSL and adapt for RN UI. Мinе is already RN-Skia-ready and built specifically for UI components like buttons and panels etc.

Let me know if you'd use something like this

u/Difficult-Sun295 — 1 day ago
▲ 0 r/react

React Developer

We are recruiting developers for a healthcare startup.

Experts from various fields will collaborate on development, and we are looking for a React expert. Full-time employment is possible in the future. Native-level English proficiency is essential for smooth communication within the team. When applying, please include an introductory video along with examples of your previous work.

reddit.com
u/Own_Strawberry3023 — 3 days ago
▲ 2 r/react+2 crossposts

Forge 1.0.0 — Build & sign React Native locally on Windows (no cloud, no Mac needed)

I've built **Forge** — a Windows desktop app that builds and signs React Native releases locally, both Android (on your machine) and iOS (via free GitHub Actions). No cloud build service, no Mac required.

**What you get:**

- Build & sign Android APKs locally

- Build iOS apps with GitHub Actions (free)

- Windows-only desktop UI (Electron)

- Offline license validation (no phone home)

- v1.0.0 beta is **completely free** to try

**No setup required:** Just download the .exe and you're building in minutes.

This is the beta launch — free for 3 weeks with unlimited builds.

[Download Forge 1.0.0](https://github.com/Evanevoo/forge/releases/tag/v1.0.0)

Happy to answer questions about the build process, licensing, or anything else!

reddit.com
u/BugsBunnyYT — 4 days ago
▲ 278 r/react+2 crossposts

We Released TanStack Table V9 Last Week - Finally Compatible with the React Compiler

In case you missed it, TanStack Table V9 was released as stable last week.

This release entailed huge refactors over the past couple of years that ended up becoming practically a full rewrite when all was said and done, though much of the API surface that you're familiar with is still there. The state management layer was completely rewritten on top of our own internal TanStack Store library, which improved compatibility and performance with all the framework adapters we offer, including React and the React Compiler.

Other improvements include a new tree-shakable feature/plugin architecture that lowers the bundle size of the average table, better type-safety throughout with new utilities and per table meta, much less memory consumption and better processing performance, a few new features like cell spanning and cell selection, hundreds of bug fixes, and a lot more, but you can read the above linked migration guide for the full details.

On top of all that, I put in a lot of time into reorganizing and rewriting major portions of the docs, including many more introductory guides, and more examples than ever that showcase more of our features, integrations with other TanStack libraries, and usage with most of the popular UI component libraries out there.

tanstack.com
u/KevinVandy656 — 6 days ago
▲ 0 r/react+1 crossposts

Built Pytah — a composable rich text editor for React

Built Pytah — a composable rich text editor for React

I’ve been building Pytah, a rich text editor built with React, Lexical, shadcn/Base UI and Tailwind CSS v4.

The idea is less about creating another editor from scratch and more about having a reference implementation that I can reuse and build on instead of recreating the same editor setup for every project.

It includes slash commands, floating toolbar, draggable blocks, tables, embeds, layouts, Markdown/HTML output, and a composable API for extending the editor.

It’s still a work in progress and not production-ready yet, but I’d love feedback on the direction and implementation.

Demo: pytah.vercel.app
Source: GitHub

reddit.com
u/underwatercr312 — 5 days ago
▲ 13 r/react+3 crossposts

Announcing ink-frame: Grids for Ink!

https://github.com/oliveryasuna/ink-frame

Ink's own box borders are fine for a single box. Put two of them next to each other and the seam between them comes out as ││, two parallel lines instead of one shared edge. That's because a box border is one unbroken line and there's nowhere to hang a or a part-way along it. ink-frame sidesteps that by painting every border into a single character grid and resolving each cell once, so a spot where four boxes meet becomes a and a T-junction becomes a , , and so on, without you ever writing those characters yourself.

Background: I recently wrote this for a private project, and I thought it was useful enough to share. I hope you find it useful too!

u/RepresentativeNo42 — 5 days ago
▲ 45 r/react+1 crossposts

It's been over a year since I graduated and I'm still unemployed. I need advice.

​

I know the junior developer market is really tough right now. I've been applying for jobs, but the process is exhausting and I haven't had much success.

I'm in a situation where I genuinely need money. Should I keep focusing on getting a developer job, or focus something else and any advice?

reddit.com
u/Street_Ball_9730 — 7 days ago
▲ 1 r/react+1 crossposts

A hydration-safe localStorage pattern that silently deleted user data on direct page loads

Spent a while chasing this one and the mechanism surprised me, so writing it up in case it saves someone else.

The setup — two things that are each fine

Like a lot of apps, we store user data (saved TV shows) in localStorage. The naive way to load it causes a hydration mismatch:

// server renders [], returning user's browser renders their real data const [favorites, setFavorites] = useState(() => JSON.parse(localStorage.getItem("favorites")) ); So we did the standard fix — start empty on both sides so the first render matches, then load the real value in an effect:

const [favorites, setFavorites] = useState([]);

useEffect(() => { const stored = localStorage.getItem("favorites"); if (stored) setFavorites(JSON.parse(stored)); }, []); Separately, the favorites page refreshes stale data on mount:

useEffect(() => { if (Date.now() - lastRefresh > TWELVE_HOURS) { refreshFavorites(); // maps over favorites, writes result to localStorage } }, []); Both reasonable. Together, they delete your data.

Why

React runs effects bottom-up — children before parents.

Land directly on /favorites (bookmark, refresh, external link) and the context provider and the page mount in the same commit. So:

Page effect runs first, calls refreshFavorites() That reads favorites from its closure — still [], because the provider's effect hasn't run yet It refreshes zero shows, gets zero back, writes [] to localStorage Provider effect runs, reads localStorage, finds [] — because it now genuinely is Why it never showed up in dev

Navigating client-side, the provider is already mounted and hydrated. The page mounts alone, favorites is populated, everything works.

It only reproduces on a fresh load of that specific URL. Which is the path a returning user takes, and the path you basically never take while building.

The fix

A flag that distinguishes "empty" from "not loaded yet":

const [hydrated, setHydrated] = useState(false);

useEffect(() => { try { const stored = localStorage.getItem("favorites"); if (stored) setFavorites(JSON.parse(stored)); } finally { setHydrated(true); // runs even if the parse throws } }, []); Page waits for it:

useEffect(() => { if (!hydrated) return; // ...refresh }, [hydrated]); The takeaway

Deferring initialisation to fix hydration creates a window where your state is legitimately untrue. That's fine — unless something else runs inside that window and can't tell the difference between "no data" and "not loaded yet."

Curious whether others have hit this. It feels like the kind of thing that's latent in a lot of Context + localStorage setups.

Full write-up with the whole story: https://watchnext.leyu.studio/blog/hydration-race-deleted-favorites

reddit.com
u/Put-Scary — 6 days ago
▲ 0 r/react

Packages

I'm new react developer, can someone tell me what is the packages that I needed in my work and very useful and how to know if new package released or any useful package?

reddit.com
u/Top-Recognition3332 — 8 days ago
▲ 26 r/react+2 crossposts

One image in, a fully rigged and animated character out - built entirely with editable Three.js code.

Still kinda wild seeing this work.

No Blender. No GLB. No traditional modeling pipeline.

Just code you can inspect, tweak, rig, animate, and make your own

u/Feisty-Scheme-8356 — 8 days ago