bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

useOnScreen: memoize IntersectionObserver, fix types

Browse source
This commit is contained in:
Alex Gleason 2023-02-06 15:39:17 -06:00
parent 76c76688e9
commit cb74b0a37c
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
1 changed files with 11 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
app/soapbox/hooks/useOnScreen.ts
View file

@ -1,13 +1,17 @@
import React from 'react'; import React, { useEffect, useMemo, useState } from 'react';
export const useOnScreen = (ref: React.MutableRefObject<HTMLElement>) => { /** Detect whether a given element is on the screen. */
const [isIntersecting, setIntersecting] = React.useState(false); // https://stackoverflow.com/a/64892655
export const useOnScreen = <T>(ref: React.RefObject<T & Element>) => {
const [isIntersecting, setIntersecting] = useState(false);
const observer = new IntersectionObserver( const observer = useMemo(() => {
([entry]) => setIntersecting(entry.isIntersecting), return new IntersectionObserver(
); ([entry]) => setIntersecting(entry.isIntersecting),
);
}, []);
React.useEffect(() => { useEffect(() => {
if (ref.current) { if (ref.current) {
observer.observe(ref.current); observer.observe(ref.current);
} }