r/reactjs

Just say I have a parent and a child

<Parent data={someObject}>
<Child name={someString} />
</Parent>

Where the Parent component sets up a provider based on the type of the data prop I would like to put a constraint on the name prop of the child component where is is to be a key of the type of the data prop passed into the parent.

Hi everyone! I just published my first open-source library. Caramel Webplayer is a themed player built on Video.js 10 (@videojs/html custom elements) with thin React wrappers. Big thanks to the Video.js team, the engine underneath is what makes this possible.

What it adds on top:

- Skin with morphing Lucide icons

- Skip intro / recap / outro / sponsor segments

- Chapter list

- Playlist with resume

- Theming through --caramel-* CSS variables (light and dark)

- React wrappers are 'use client', elements register in the browser only, so the Next.js App Router stays SSR clean

I built it for my own site and then opened it up. Before I even announced it, we merged our first outside contribution (playlist resume thresholds, React props and tests, from a contributor who picked up a good first issue).

Demo: https://esershnr.github.io/caramel-webplayer/

Repo (MIT): https://github.com/esershnr/caramel-webplayer

It's still early, so I'd really appreciate feedback, issues and PRs. If it's useful to you, a star helps others find it.

Hey everyone,

On every i18n project I worked on, the same thing kept happening: my editor treated translation keys as dead strings. I kept opening fr/common.json just to check whether a key existed, which namespace it lived in, or whether someone forgot to translate it in German.

So I built I18n Support Plus, an open-source (MIT) plugin for WebStorm, IntelliJ IDEA Ultimate and PhpStorm (2025.1+). It turns t('common:menu.home') into something the IDE actually understands.

In the editor

• Ctrl+Click from a key to its translation and back, with a gutter icon showing resolved / missing / missing file
• The translated value shown inline (inlay hints, folding, hover)
• Autocomplete from your real keys. Each suggestion shows its translation, and you can find a key by its text: typing acc offers menu.home when it reads "Accueil"
• Alt+Enter on a hardcoded string to extract it. If the text already exists in your reference locale, it offers the existing key instead of creating a duplicate. <p>Hello {user.name}</p> becomes one message with a {{name}} placeholder
• Rename a key across all locales and code (Shift+F6), move it to another namespace, delete it everywhere with a single undo

Catching mistakes before your users do

• A key missing from a locale, or plural forms missing for a language (ru needs few and many, not just one/other)
• t('greeting') called without the name variable its translation uses
• A translation that lost a <1> tag, which silently breaks <Trans>
• A value just copied from the English one and never translated

Project-wide

• A tool window with tree and table views, coverage per namespace and locale, and a "show only what's left to translate" filter
• Find unused keys, sync missing keys in bulk, CSV and XLIFF export/import for translators
• Generate a typed i18next.d.ts so tsc rejects a mistyped key in CI, even for teammates who don't use the plugin
• Generate a pseudo-locale ([Šéţţîñĝš ···]) to spot unextracted or truncated text

It works with i18next/react-i18next, vue-i18n, lingui, react-intl (FormatJS), ngx-translate, svelte-i18n and i18n-js. It supports JS/TS/JSX/TSX, Vue SFC and PHP, with JSON, YAML and PO/POT files. A setup wizard detects your framework on first launch.

I'd really like feedback from people who live with multi-language apps: what breaks on your setup, and what's missing? I've also opened a few good first issues if anyone wants to contribute, for example Nuxt / next-intl detection, a CONTRIBUTING guide, and GIFs for the README.

• Marketplace: https://plugins.jetbrains.com/plugin/30971-i18n-support-plus
• GitHub: https://github.com/IBRAHIMDANS/i18nSupportPlus

Happy to answer questions, and roasting is welcome.

Heya, I need to store dev secrets (e.g. client secret credentials) and I don't want them in git

In dotnet we have manage user secrets and theyre managed by Visual Studio, stored in a local folder and sideloaded at runtime... Does react have something similar?

I've seen people just do .env.local and add that to gitignore, but is that actually the proper way?

I needed a picker for Orshot's template editor that wouldn't break on real CSS. The one we used threw on valid values and had no room for brand or saved colors, so I built my own

- Takes any CSS color or gradient string and returns one, untouched parts stay exactly as written

- Linear, radial, conic and repeating gradients

- hex, rgb, hsl, oklch, eyedropper, Cmd+V to paste any color

- Swatch groups (brand, saved, recent), keyboard and screen reader support

- Zero-dep core, ~14 KB gzipped, MIT

GitHub: https://github.com/rishimohan/colorshot

Live demos: https://orshot.com/open-source/colorshot

Feedback on the API or how dragging feels would help a lot

I maintain multiple legacy React apps - CRA, React 18, client-side routing, content from a CMS / Wordpress REST API. But SEO and OG tags need real HTML, and a client-side app hands them an empty page.

react-snap solved that for years. It has been unmaintained since 2019 and breaks a little more with every browser update. I could not find a drop in replacement so I built one. It has been running on my own site for a while, and now I am putting it out there: snappy-prerender.

What it does, in one sentence: it opens every page of your built app in a real browser at build time and saves the result as plain HTML, so crawlers see the page your users see.

npm
 install --save-dev snappy-prerender@next
npx snappy-prerender init      # a few questions, then a config file
npx snappy-prerender build     # or run it from vite build

No server, no rewrite, no changes to how the app works.

Things I added because I needed them

• It checks every page after the build and tells you whether the app's JavaScript picked up the prerendered HTML or threw it away and redrew everything. That report is the part I use most.
• It writes the page title, description, canonical link and Open Graph/Twitter tags for each route, including when the user navigates around the site, so you do not need react-helmet for that.
• It handles the fiddly things that usually break prerendering: styles injected by CSS-in-JS, form state, data fetched from an API, critical CSS, preload hints.
• It works with a strict Content Security Policy if your project needs one.

What it is not

• Not server-side rendering. It runs at build time, so new content means a new build.
• Not for Next.js, Remix or Astro users; those already render HTML on the server.
• It cannot fix an app that renders differently every time (dates, random values, viewport-dependent layout). It does tell you which page has the problem.
• It is a release candidate: 2.6.0-rc.2 is on npm under the next tag while I gather feedback.

Links

• npm: https://www.npmjs.com/package/snappy-prerender (install with u/next until 2.6.0 is stable)
• GitHub: https://github.com/sayakmukherjee080/snappy-prerender
• MIT licensed. Issues and PRs welcome, especially if you have an old SPA that breaks it. The README covers every option.

Looking forward to criticism, bug-reports and feature-requests and revival requests for unmaintained plugins (react and family only)