Questions tagged [react-intersection-observer]
52 questions
0
votes
0 answers
React how to count image items when it overflow the page
I want to develop a feature that likes google drive document in view mode which mean whenever I scroll my page up my count will increase to 1 and when I scroll down it will decrease to 1, I try to search solution on the internet after 2 weeks, I…
GumZ
- 11
- 2
0
votes
2 answers
How to prevent components from constantly remounting when lazy-loading with react-intersection-observer?
I am lazy-loading components on a React page by using react-intersection-observer:
import React from "react";
import { useInView } from "react-intersection-observer";
const LazyComponent = ({ LoadableComponent, ...rest }) => {
const { ref, inView…
Ruben Lemiengre
- 104
- 8
0
votes
0 answers
React testing library + react-intersection-observer: how to make sure that item is intersecting
I have a component that uses @researchgate/react-intersection-observer, and I am trying to create a test where the component is visible.
When boiling my component down to only what is about the intersection-observer, it looks something like…
some_name
- 389
- 3
- 17
0
votes
0 answers
How to use multiple(dynamic) useInView Hooks in one component
I try to build a custom carousel where I need to know when the items in the carousel are in view and when not.
Therefore I tried to use useInView Hook from react-intersection-observer. But I don't know how I could implement a solution where I need…
mrnb
- 3
- 2
0
votes
0 answers
Type 'MutableRefObject' is missing the following properties from type 'Element'
I'd like to use intersection observer in my React TS project.
(https://www.npmjs.com/package/react-intersection-observer)
At one point I cannot set the root:
const root = useRef(null);
const { ref, inView, entry } = useInView({
root: root,
…
Bufer
- 85
- 1
- 8
0
votes
2 answers
Higher Order Component to observe Visibility: React?
I have created a higher order component as shown below:
import React from 'react';
interface IVisibility {
Component: JSX.Element;
visibilityThreshold?: number;
onVisibleCallback?: () => void;
}
const VisibilityHandler = ({
…
Shivam Sahil
- 4,055
- 3
- 31
- 62
0
votes
1 answer
Trying to implement react-intersection-observer inside react-grid-layout with no luck
I have a page where there are around 10-15 cards fetching data from APIs and printing graphs. When I load the page they all start fetching data and render a graph which is making page little lagging as obvious.
As a part performance optimization I…
www.amitpatil.me
- 3,001
- 5
- 43
- 61
0
votes
0 answers
How to test both inView and outView cases separately using jest React, when I am using useInView() hook of react-intersection-observer
I am using useInView() hook to monitor a component, and whenever the component is InView , I perform some operation. I am writing UT's for this component and I want to test both the cases i.e. when the component is inView or not. Can anyone suggest…
Shubham Saxena
- 1
- 1
0
votes
1 answer
[React][useInfiniteQuery] How to restrict the first fetch call to happen only when the view is visible in the viewport
I am using useInfiniteQuery hook for infinite scrolling items in my component. I want that the first fetch happens only when the view is visible in the viewport . I am using useInView/intersection observer for finding if the view is visible in…
Shubham Saxena
- 1
- 1
0
votes
0 answers
infinite scroll, react-intersection-observer, How to add new Array to the foundation Array? (i used spread... but didn't worked)
I'm making movie app (using react.js)
I want to show a list of new movies whenever user scrolls down.
but when i write these codes, it doesn't work.
I used react-intersection-observer and made the second useEffect for adding new list.
can you see…
HarryA123
- 11
- 2
0
votes
0 answers
Framer motion and react intersection observer library stopping links
I'm working on a react project and i used Framer Motion and react intersection observer library to do some animations. The animations work fine enough, but I just discovered that when I give an image or text or anything in that particular component…
Mayowa
- 41
- 5
0
votes
1 answer
React Three Fiber, Drei & Intersection Observer: How to change Canvas Model Element Based on The InView Component
Would appreciate it you can help :)
even a nudge in the right direction is welcomed
Question
How do I display, based on Aside component, a different Bonsai part on scroll.
Context:
BonsaiPart changes the mesh based on a prop called partName.
I would…
0
votes
1 answer
IntersectionObserver - transform properties targets the whole SVG animation and not class
I'm trying to get a svg animation to start when it's in the viewport. It works but when adding transform properties the whole svg and not just the targeted class is affected.
import React, { useEffect, useRef, useState } from 'react';
import {…
Johanna
- 3
- 2
0
votes
1 answer
react-intersection-observer only works with the last elements
I'm trying to build the Lazy Loading feature with react-intersection-observer, the goal is to only load the images in the boxes if they're in the viewport.
Currently, when I scroll to the last elements - it will render out all of the images of the…
KYin
- 439
- 1
- 5
- 21
0
votes
0 answers
How to change hook mockImplementation result in a single test
I'm using react-intersection-observer in this component, when this element is inView, doSomething will be called. It is expected to trigger doSomething every time this element is seen by the user.
const Component = () => {
const { ref, inView } =…
wtf512
- 4,487
- 9
- 33
- 55