Frontendx
README.md
SOLUTION.md
main.tsxentry
App.tsx
App.css
index.html
vite.config.ts
Installed
react@^19.2.0
react-dom@^19.2.0

Capture Products Visible in Viewport When User Stops Scrolling — React

Prompt

Implement the same viewport-capture feature as the Vanilla JS version but built as a React component or custom hook. Detect when the user stops scrolling using a debounced scroll listener, then check which product card elements are visible in the viewport using the Intersection Observer API or getBoundingClientRect. Log or display the visible product identifiers for tracking. Design it to be reusable and extensible like a library.

Use a debounce function with a delay (e.g., 300ms) on the scroll event listener to detect when scrolling stops.
Test Results

Capture Products Visible in Viewport When User Stops Scrolling — React

Implement the same viewport-capture feature as the Vanilla JS version but built as a React component or custom hook. Detect when the user stops scrolling using a debounced scroll listener, then check which product card elements are visible in the viewport using the Intersection Observer API or getBoundingClientRect. Log or display the visible product identifiers for tracking. Design it to be reusable and extensible like a library.