476,976 questions
Advice
0
votes
2
replies
79
views
SPA framework output access without node or any server setup?
New SPA frameworks like React, Angular, Vue etc. Requires running node js server. But is there any way to run "output" (code generated after transpilation step) without running any server, ...
- 13
0
votes
1
answer
37
views
How to set a background image for the WebView on an android app built with React DOM + Capacitor v7?
package com.app_name.app;
import com.getcapacitor.BridgeActivity;
import android.os.Bundle;
import android.graphics.Color;
// import android.webkit.WebView;
public class ...
-4
votes
0
answers
95
views
Vite React project gives 404 error on http://localhost:5173/ [closed]
Vite server was working fine in my development environment until I turned it off in terminal with Ctrl+C and added react-router-dom to my project. Upon restarting the dev server using vite dev, I am ...
- 3
0
votes
2
answers
49
views
Define custom CSS variables in MUI for both light and dark mode
This is my theme config in my MUI app:
import { createTheme } from '@mui/material/styles';
declare module '@mui/material/styles' {
interface Theme {
myVariable: string;
}
interface ...
- 3,108
Best practices
1
vote
3
replies
111
views
What is the best practice for sharing types between a NestJS API with Prisma ORM and client applications?
We currently have a NestJS API using Prisma ORM. The API is used by multiple Next.js applications in different repos. To help with type safety across the various repos, we have a common "types&...
-1
votes
0
answers
50
views
how to remove extra dashboard button React Refine [closed]
I am doing a react refine app, and the problem I have is that I have an extra dashboard button that takes me to my login page, and I can't find a way to remove it.
Here is an image of what it looks ...
-5
votes
1
answer
77
views
Full screen cover does not work for a react video player component [closed]
<ReactPlayer
key={1}
style={{
objectFit: "cover",
overflow: "hidden",
}}
width={window.innerWidth}
height={window.innerHeight}
src={"https://vimeo.com/...
- 3,330
Best practices
0
votes
3
replies
39
views
Nuxt.js pre-render data in the server for the seo purpose
We have a nuxt.js project which is an ecommerce site. We load the products page with first 100 products as SSR. after that we load other products as we needed from the client side using an API call. ...
- 7,297
-3
votes
0
answers
36
views
Updating state in React.js but there is a lag of one element [duplicate]
const onChangeFn = (e,i) => {
const data = e.target.value;
if(/^\d?$/.test(data)){
let new_Array = [...values]
new_Array[i] = data;
setValues(...
0
votes
0
answers
44
views
Responsive setting not working react slick slide [closed]
I have implemented a slick slider for my react component. It is not working properly on responsive mode, even though the responsive setting is implemented. The issue can be viewed in the technologies ...
- 135
-2
votes
0
answers
78
views
PDF renders in browser but not inside Tauri app [closed]
I’m building a Tauri + Vite + React app, and my PDF viewer uses PDF.js. The viewer works perfectly in the browser. When I visit -
http://localhost:5173/sample.pdf
the PDF displays correctly, so Vite ...
- 1
-1
votes
1
answer
45
views
Why does React re-render a component even when state is not changed? [closed]
I’m trying to understand React rendering behavior.
Sometimes my component re-renders even when I don’t update the state directly.
For example:
function App() {
console.log("rendered");
...
-2
votes
0
answers
63
views
Android app shows occasional white screen on start or wake — how to replace it with a custom image or color? [closed]
I'm building an Android app using React and Capacitor v7. Occasionally, when the app is opened from a cold start or resumed from the background, a white screen appears briefly before my app's UI loads....
-1
votes
2
answers
72
views
Selenium not setting value for <input type="datetime-local"> in React, value shows in UI but not in actual DOM
I'm automating a test using Selenium (Node.js) and trying to set a value for a datetime-local input. The UI visually shows the correct date/time, but when I inspect the element after driver.sleep(), ...
Advice
0
votes
1
replies
27
views
Which OS for Raspberry PI 4 Wails Application
I have developed an application with react which I deploy in docker then pull the images on my raspberry pi and then direct wails to use this docker application to show my ui. So far it works but the ...
- 11
0
votes
0
answers
25
views
Can I create custom JS loader for in memory bundle to be passed in ReactInstanceManager? [closed]
I'm working on implementing dynamic bundle loading for React Native. Currently, ReactInstanceManager.Builder only supports asset:// and file:// protocols for loading JavaScript bundles.
I need to ...
- 175
0
votes
0
answers
57
views
Android APK Status Bar Turns White on App Relaunch (React Native/Expo)
I'm facing a persistent Status Bar issue in my React Native app using Expo. The Status Bar displays correctly during development and on first app install, but becomes white with unreadable content ...
-1
votes
2
answers
145
views
ScrollTrigger not working after route navigation (works on localhost, breaks in production)
I'm stuck with a weird ScrollTrigger issue in my Next.js app and could really use some help.
What's happening
I have a section on my homepage that uses GSAP ScrollTrigger to pin and animate when you ...
0
votes
1
answer
59
views
Inifinite loading with generateMetadata in Next.js 15.3.3 and React 19.2
I’m trying to generate dynamic metadata using the built-in Next.js method generateMetadata. On localhost, it works: it fetches the title, reads the related article, and generates the metadata in the &...
0
votes
3
answers
81
views
why nextjs is sending async prop from a component to a suspended child component [closed]
import {Suspense} from "react"
type Props = {
params: Promise<{joblistingId: string }>
}
export default function JoblistingPage(props: Props) {
return (
<...
1
vote
1
answer
54
views
Unable to show line on Combined Bar and Line chart on React native Gifted charts
I want to implement a combined Bar and Line chart with Gifted charts.
I followed all the required steps from the documentation but it still doesn't work. It displays the bar chart but skips the line ...
- 393
0
votes
0
answers
28
views
Safari/Chrome: Caret not placed before/after non-editable elements in rich-text editors (Jodit)
I’m facing a caret-position issue in Safari when working with non-editable elements inside a rich-text editor (for example Jodit).
When an inline or block element inside the editor is marked as non-...
1
vote
1
answer
46
views
How to enable Undo and Redo using Quill?
I am using Next.js 15.5.4, React 19.1.0, and the package react-quill-new 3.6.0 for a blog editor.
The editor works fine, the toolbar works fine, and all formatting options are working.
But now I want ...
- 45
-1
votes
2
answers
97
views
How to add soft line breaks in Quill?
I'm struggling with making Quill 2.0 support soft line breaks in React 19. The library I'm using is react-quill-new
Basically I want editor to add a <br> tag without the surrounding <p> ...
0
votes
0
answers
38
views
Full screen View GestureDetector's swipe gesture overrides the system's swipe-back gesture
I followed the expo doc and wrote the following code. Its main function is to use an image as a top background, where swiping down anywhere on the screen increases the image height to zoom in. However,...
- 1
-5
votes
1
answer
105
views
React runs useState update twice, possibly due to strict mode, need some details [closed]
this is my code for a vite react + ts calendar
import Day from "./Day";
import style from "./Calendar.module.css";
import { useState } from "react";
import type { ...
1
vote
1
answer
122
views
React web app caching issue in Chrome when switching accounts
I'm experiencing a caching issue in my React web application on Chrome and would appreciate some help.
When I visit my domain and log in for the first time, all account data displays correctly. ...
- 33
0
votes
1
answer
78
views
Animated.loop loses synchronization between multiple animations over time
I'm creating a ripple wave animation in React Native with three overlapping circles that should maintain consistent spacing. Initially, the waves animate perfectly with even intervals, but after ...
- 11
1
vote
1
answer
88
views
Storybook workaround for inconsistent conditional controls behavior
Summary of problem: I am using Storybook in my React / Next JS app for my component library. I'm encountering a design inconsistency in how Storybook handles conditional controls — specifically, in ...
- 321
0
votes
2
answers
57
views
React Music Player – audioRef.play() not triggered when track changes
I’m building a simple music player in React that uses the HTMLAudioElement via audioRef. I expect the track to auto-play whenever I change currentTrack, but playback doesn’t start (though the UI ...
-1
votes
1
answer
88
views
Document.cookies set from inside my webview are undefined [closed]
I have a webapp that's already production ready to run inside a React Native Webview. The app uses the package js-cookie which saves the accessToken and refreshToken to the browser cookies.
import ...
- 2,389
3
votes
1
answer
74
views
How to correctly pass a data-testid to <AsyncSelect> in react-select for testing?
I am trying to add a stable data-testid to a react-select component (specifically AsyncSelect) so that I can reliably select it in my Playwright E2E tests.
When I try to pass the data-testid prop ...
- 1,452
Tooling
0
votes
5
replies
111
views
How can I overlay two videos similar to a golf swing CoachNow app?
I'm trying to overlay two videos in React Native, similar to golf training apps where you compare swings by showing both videos at once with adjustable opacity. My goal is to display both videos, ...
Best practices
0
votes
2
replies
143
views
When should I use useTransition() or startTransition in React
I have been exploring the useTransition() hook and the startTransition() method provided by React with version 18+.
The documentation states that we can de-prioritize state updates using them so that ...
- 49
Best practices
1
vote
5
replies
127
views
How can I create a fully custom-styled sorting dropdown in React (instead of the default <select> styling)?
I’m trying to build a sorting dropdown for my product list in a React app.
The sorting options are things like:
Default
A - Z
Z - A
Price: Low - High
Price: High - Low
My first approach was to ...
0
votes
0
answers
73
views
Why isn't my code changing the highlight color in React Bricks?
I have tried to change the color of the highlight for text in a text media block. How can I do it? I used different colors in the render highlight just to see if it would change anything. Really can't ...
1
vote
1
answer
56
views
How does it work (internally) when returning Navigate component in React Router v7?
I'm trying to implement a redirect based on a property passed to a component nested deep within my route hierarchy. Right now I know 2 options how to do it.
const MyComponent = ({ variable }: { ...
- 2,630
2
votes
1
answer
61
views
React Hook Form does not upadate `errors` field on parent when triggering children
I have the following schema in my RHF form:
const latexSchema = z.string().refine(
() => {
return solutionRef.current?.editor?.state.doc.textContent.length! >= 10;
},
'Wymagane jest co ...
- 393
0
votes
1
answer
39
views
Simple Mui TextField crashing in RTL locale
My application is there for a long time and everything works perfectly in both the locales we support en and ar.
So I don't think there is any issue with the localization setup.
But now for a simple ...
- 4,431
-3
votes
1
answer
91
views
ReactRouter Check [duplicate]
Is this Router correct? because it doesn't work in GitHub Live Pages.
It works properly in localhost server, but does not work in GitHub Live Pages
import { BrowserRouter, Routes, Route } from "...
-1
votes
1
answer
82
views
React-ChartJS-2 Radar chart still showing default point labels even when pointLabels.display is false
I’m building a Radar chart in React using react-chartjs-2 and Chart.js v4.
I want to disable the default black “point labels” (around the circle) because I’m drawing my own custom labels with a plugin....
-1
votes
2
answers
87
views
Role-based routes without prefixes (always getting 404 after login)
I'm trying to set up role-based routing in my React app (React Router v6) so that:
I don't want any route prefixes (like /admin or /user)
The routes rendered depend on the logged-in user's role
...
- 136
0
votes
1
answer
37
views
Use selectedRecords prop in mantine datatable without displaying checkboxes
I have a mantine-datatable that I would like to use the select functionality, but I don't like the checkboxes that come out of the box when you provide the selectedRecords prop.
Is it possible to &...
- 532
-1
votes
0
answers
44
views
Unit test for React/Chakra [closed]
This is my parent component.
import { useState } from 'react';
import VButton from 'ui-components/src/v2/VButton.jsx';
import { Provider } from 'ui-components/src/v2/providers/chakra.jsx';
import { ...
- 593
0
votes
1
answer
50
views
When upgrading to React 19 and NextJS 15, jest snapshots that had header changes via `next/head` break
In our tests, we had several snapshots that included content wrapped in next/head. We had previously followed the below pattern for the mock, which allowed us to see all the header tags like meta, ...
- 3,157
-1
votes
0
answers
73
views
Generic context selector with `use-context-selector`
I have a generic FormProvider like below:
"use client";
import { useMemo } from "react";
import {
FieldValues,
FormProvider as RHFProvider,
SubmitErrorHandler,
...
- 393
Advice
0
votes
4
replies
69
views
How to access React context for base URL when creating Redux-Toolkit Query API slice?
I am trying to move to RTK Query, but am struggling with one thing - how to access React Context.
I currently am using custom hooks to query a back end. Depending on the environment (dev, uat, prod), ...
- 6,956
0
votes
1
answer
42
views
Electron-Vite App seemingly not loading preload script [closed]
I'm trying to access a local sqlite3 database using ICP. When I run the handleSubmit() function in my Login component, I receive the following error:
Uncaught (in promise) TypeError: can't access ...
- 11
Best practices
2
votes
2
replies
151
views
What is the best modern approach to creating sitemaps in React production apps?
I'm currently working on a production-ready React application built with React Router v7 and Vite. I need to implement a proper sitemap to improve SEO performance.
Tech Stack:
React 19 with ...
1
vote
1
answer
114
views
Include html entity in react textarea placeholder / javascript string?
I want to put linebreaks in a placeholder for a textarea. According to this question & answer, I should add html entity wherever I want a line break. This seems to work when I try it in ...
- 5,309