How can I apply a global scroll event to multiple React components? - reactjs

I'm building a React app and I'd like to have a global CSS class that is used to fade in components when they appear in the viewport.
jQuery
With jQuery, I might do something like this:
const windowHeight = (window.innerHeight || document.documentElement.clientHeight);
const windowWidth = (window.innerWidth || document.documentElement.clientWidth);
isInViewport(el) {
const rect = el.getBoundingClientRect();
const vertInView = (rect.top <= windowHeight) && ((rect.top + rect.height) >= 0);
const horInView = (rect.left <= windowWidth) && ((rect.left + rect.width) >= 0);
return (vertInView && horInView);
};
$(window).scroll(function(e) {
$('.animate').each(function() {
if(isInViewport($(this)[0])) {
$(this).addClass('animate--active');
}
});
});
On scroll, I'd check each element with the animate class and if that element is in the viewport, add the animate--active class to it, which will fade it in.
React
In React, I've moved my isInViewport() function to a global Helpers.js file so any component can make use of it, but I've had to add the scroll event and the dynamic class to every component, which makes for a lot of duplicated code. For example:
import { isInViewport } from './Helpers.js';
function MyComponent(props) {
const [inViewport, setInViewport] = useState(false);
const myComponentRef = useRef();
function handleScroll(e) {
setInViewport(isInViewport(myComponentRef.current));
}
useEffect(() => {
window.addEventListener('scroll', handleScroll);
// unmount
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, []);
const classes = (inViewport) ? 'animate animate--active' : 'animate';
return (
<section className={classes} ref={myComponentRef}>
</section>
);
}
As far as I can tell, this would be the React way of doing this, and this does work, but again, it means that every component would require its own state variable, scroll event and class declaration, which adds up to a lot of repetition. Is there a better way of doing this?

Custom Hooks, Custom Hooks, Custom Hooks
import { isInViewport } from './Helpers.js';
function useIsInViewPort(ref) {
const [inViewport, setInViewport] = React.useState(false);
function handleScroll(e) {
setInViewport(isInViewport(ref.current));
}
React.useEffect(() => {
window.addEventListener('scroll', handleScroll);
// unmount
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, []);
return inViewport;
}
function Acmp(props) {
const ref = React.useRef();
const inViewport = useIsInViewPort(ref);
const classes = (inViewport) ? 'animate animate--active' : 'animate';
return (
<section className={classes} ref={ref}>
</section>
);
}
function Bcmp(props) {
const ref = React.useRef();
const inViewport = useIsInViewPort(ref);
return (
<section className={classes} ref={ref}>
</section>
);
}

Related

Custom Hooks inside Javascript Class

I know that we can create multiple custom hooks in separate files for example
useCounter.js and useToggle.js.
My Question
Can we create a Javascript class with its methods as custom hooks and use it in our functional components. Is this an anti-pattern ? The reason I am thinking to put it in a JS class is so that I don't have to create multiple files for custom hook.
Something Like below
class CustomHooks {
useCounter() {
const [count, setCount] = React.useState(0);
const increment = () => setCount(count + 1);
const decrement = () => setCount(count - 1);
return { count, increment, decrement };
}
useToggle(initialState = false) {
const [state, setState] = React.useState(initialState);
const toggle = () => setState(!state);
return { state, toggle };
}
}
And use it like below
const hooks = new CustomHooks();
const Counter = () => {
const { count, increment, decrement } = hooks.useCounter();
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</div>
);
};
const Toggler = () => {
const { state, toggle } = hooks.useToggle();
return (
<div>
<p>Toggler is {state ? "on" : "off"}</p>
<button onClick={toggle}>Toggle</button>
</div>
);
};
const App = () => {
return (
<div>
<Counter />
<Toggler />
</div>
);
};
You cannot use React hooks in class. If your goal is not to have multiple files for multiple hooks, create a single file and export multiple hooks from it.
// hooks.js
export const useToggle = () => {
// hook implementation
}
export const useCounter = () => {
// hook implementation
}
And use them in your components
// App.js
import { useToggle, useCounter } from './hooks';
function App() {
const toggle = useToggle();
const counter = useCounter();
return <div>hi there</div>
}
You can simply create an object that will hold the hooks.
customhooks.js
function useCounter () {
...
}
function useToggle(initialState = false) {
...
}
export const hooks = {
useCounter,
useToggle
}
counter.js
import { hooks } from "./customhooks.js";
const Counter = () => {
const { count, increment, decrement } = hooks.useCounter();
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</div>
);
};
However, personally I recommend handling with individual files per hook. Especially when the project gets bigger and we have many hooks, we eventually get to the point that we need different hooks in different areas and it can be detrimental to performance if all hooks have to be loaded at once. Of course, this is not only related to the number but also to the complexity of the hooks and what dependencies they have in turn.

How to use the code above in React js using hooks

document.getElementById("cards").onmousemove = e => {
for(const card of document.getElementsByClassName("card")) {
const rect = card.getBoundingClientRect(),
x = e.clientX - rect.left,
y = e.clientY - rect.top;
card.style.setProperty("--mouse-x", `${x}px`);
card.style.setProperty("--mouse-y", `${y}px`);
};
}
I actually don't know how to use the above code in react js. so, if anyone knows please respond!
full source code link:
https://codepen.io/Hyperplexed/pen/MWQeYLW
to use Hook you need to handle with reference of element like this
const CardRef = React.useRef(null);
useShadow(CardRef);
return <div ref={CardRef} className="card" ></div>
And the hook would be something like this
import { useEffect } from 'react';
const useShadow = (reference: React.MutableRefObject<any>) => {
useEffect(() => {
const eventReference = (e) => {
const rect = reference.current.getBoundingClientRect(),
x = e.clientX - rect.left,
y = e.clientY - rect.top;
reference.current.style.setProperty('--mouse-x', `${x}px`);
reference.current.style.setProperty('--mouse-y', `${y}px`);
};
if (reference.current) {
const { current } = reference;
current.addEventListener('mousemove', eventReference);
}
return () => {
reference.current &&
reference.current.removeEventListener('mousemove', eventReference);
};
}, [reference]);
};
export default useShadow;
First of all, React does provide SyntheticEvents, so your onmousemove would probably look like this in React:
<div onMouseMove={ yourEventHandler } />
I can see what you are trying to do is to set the children .card's properties when the mouse had moved. What you can do is to have useState() in the parent .cards container to store the latest mouse position, then pass that state as props into the children. Something like:
export function Cards() {
const [mouseX, setMouseX] = useState(0);
const [mouseY, setMouseY] = useState(0);
const myOnMouseMove = (e)=> {
// set your state using setMouseX(), setMouseY()
}
return (
<div className='cards' onMouseMove={myOnMouseMove}>
<Card className='card' mouseX={mouseX} mouseY={mouseY} />
<Card className='card' mouseX={mouseX} mouseY={mouseY} />
...
</div>
)
}
(Not real implementation, just the concept)

I would expect this useRef and useEffect combo to fail...why does it succeed?

I would expect this useEffect to fail on the first render, since I would assume the innerCarouselRef.current would be undefined on the first render and it makes a call to getBoundingClientRect. Why does it work/why is the innerCarouselRef.current defined when the useEffect runs?
import React from 'react';
import { debounce } from 'lodash';
export default function Carousel({ RenderComponent }) {
const [innerCarouselWidth, setInnerCarouselWidth] = React.useState(0);
const [itemWidth, setItemWidth] = React.useState(0);
const innerCarouselRef = useRef();
const itemRef = useRef();
const content = data.map((el, i) => {
return (
<div key={`item-${i}`} ref={i === 0 ? itemRef : undefined}>
<RenderComponent {...el} />
</div>
);
});
useEffect(() => {
const getElementWidths = () => {
setInnerCarouselWidth(innerCarouselRef.current.getBoundingClientRect().width); // why doesn't this call to getBoundingClientRect() break?
setItemWidth(itemRef.current.getBoundingClientRect().width);
};
getElementWidths();
const debouncedListener = debounce(getElementWidths, 500);
window.addEventListener('resize', debouncedListener);
return () => window.removeEventListener('resize', debouncedListener);
}, []);
return (
<div className="inner-carousel" ref={innerCarouselRef}>
{content}
</div>
)
}
React runs the effects after it has updated the DOM (we typically want it to work that way). In your case, the effect runs after the component has mounted and so innerCarouselRef.current is set.
I would recommend reading the useEffect docs to gain a better understanding.

When to use hooks? is worth it that example?

I have write a hook to check if browser is IE, so that I can reutilize the logic instead of write it in each component..
const useIsIE = () => {
const [isIE, setIsIE] = useState(false);
useEffect(() => {
const ua = navigator.userAgent;
const isIe = ua.indexOf("MSIE ") > -1 || ua.indexOf("Trident/") > -1;
setIsIE(isIe);
}, []);
return isIE;
}
export default useIsIE;
Is it worth it to use that hook?
Im not sure if is good idea because that way, Im storing a state and a effect for each hook call (bad performane?) when I can simply use a function like that:
export default () => ua.indexOf("MSIE ") > -1 || ua.indexOf("Trident/") > -1;
What do you think? is worth it use that hook or not?
If not, when should I use hooks and when not?
ty
No. Not worth using the hook.
You'd need to use a hook when you need to tab into React's underlying state or lifecycle mechanisms.
Your browser will probably NEVER change during a session so just creating a simple utility function/module would suffice.
I would recommend to set your browser checks in constants and not functions, your browser will never change.
...
export const isChrome = /Chrome/.test(userAgent) && /Google Inc/.test(navigator.vendor);
export const isIOSChrome = /CriOS/.test(userAgent);
export const isMac = (navigator.platform.toUpperCase().indexOf('MAC') >= 0);
export const isIOS = /iphone|ipad|ipod/.test(userAgent.toLowerCase());
...
This is a simple hook that checks if a element has been scrolled a certain amount of pixels
const useTop = (scrollable) => {
const [show, set] = useState(false);
useEffect(() => {
const scroll = () => {
const { scrollTop } = scrollable;
set(scrollTop >= 50);
};
const throttledScroll = throttle(scroll, 200);
scrollable.addEventListener('scroll', throttledScroll, false);
return () => {
scrollable.removeEventListener('scroll', throttledScroll, false);
};
}, [show]);
return show;
};
Then you can use it in a 'To Top' button to make it visible
...
import { tween } from 'shifty';
import useTop from '../../hooks/useTop';
// scrollRef is your scrollable container ref (getElementById)
const Top = ({ scrollRef }) => {
const t = scrollRef ? useTop(scrollRef) : false;
return (
<div
className={`to-top ${t ? 'show' : ''}`}
onClick={() => {
const { scrollTop } = scrollRef;
tween({
from: { x: scrollTop },
to: { x: 0 },
duration: 800,
easing: 'easeInOutQuart',
step: (state) => {
scrollRef.scrollTop = state.x;
},
});
}}
role="button"
>
<span><ChevronUp size={18} /></span>
</div>
);
};

React Hooks, how to implement useHideOnScroll hook?

const shouldHide = useHideOnScroll();
return shouldHide ? null : <div>something</div>
The useHideOnScroll behaviour should return updated value not on every scroll but only when there is a change.
The pseudo logic being something like the following:
if (scrolledDown && !isHidden) {
setIsHidden(true);
} else if (scrolledUp && isHidden) {
setIsHidden(false);
}
In words, if scroll down and not hidden, then hide. If scroll up and hidden, then unhide. But if scroll down and hidden, do nothing or scroll up and not hidden, do nothing.
How do you implement that with hooks?
Here:
const useHideOnScroll = () => {
const prevScrollY = React.useRef<number>();
const [isHidden, setIsHidden] = React.useState(false);
React.useEffect(() => {
const onScroll = () => {
setIsHidden(isHidden => {
const scrolledDown = window.scrollY > prevScrollY.current!;
if (scrolledDown && !isHidden) {
return true;
} else if (!scrolledDown && isHidden) {
return false;
} else {
prevScrollY.current = window.scrollY;
return isHidden;
}
});
};
console.log("adding listener");
window.addEventListener("scroll", onScroll);
return () => {
window.removeEventListener("scroll", onScroll);
};
}, []);
return isHidden;
};
const Navbar = () => {
const isHidden = useHideOnScroll();
console.info("rerender");
return isHidden ? null : <div className="navbar">navbar</div>;
};
export default Navbar;
You might have concern about setIsHidden causing rerender on every onScroll, by always returning some new state value, but a setter from useState is smart enough to update only if the value has actually changed.
Also your .navbar (I've added a class to it) shouldn't change the layout when it appears or your snippet will get locked in an infinite loop. Here're appropriate styles for it as well:
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 30px;
background: rgba(255, 255, 255, 0.8);
}
Full CodeSandbox: https://codesandbox.io/s/13kr4xqrwq
Using hooks in React(16.8.0+)
import React, { useState, useEffect } from 'react'
function getWindowDistance() {
const { pageYOffset: vertical, pageXOffset: horizontal } = window
return {
vertical,
horizontal,
}
}
export default function useWindowDistance() {
const [windowDistance, setWindowDistance] = useState(getWindowDistance())
useEffect(() => {
function handleScroll() {
setWindowDistance(getWindowDistance())
}
window.addEventListener('scroll', handleScroll)
return () => window.removeEventListener('scroll', handleScroll)
}, [])
return windowDistance
}
You need to use window.addEventListener and https://reactjs.org/docs/hooks-custom.html guide.
That is my working example:
import React, { useState, useEffect } from "react";
const useHideOnScrolled = () => {
const [hidden, setHidden] = useState(false);
const handleScroll = () => {
const top = window.pageYOffset || document.documentElement.scrollTop;
setHidden(top !== 0);
};
useEffect(() => {
window.addEventListener("scroll", handleScroll);
return () => {
window.removeEventListener("scroll", handleScroll);
};
}, []);
return hidden;
};
export default useHideOnScrolled;
live demo: https://codesandbox.io/s/w0p3xkoq2l?fontsize=14
and i think name useIsScrolled() or something like that would be better
After hours of dangling, here is what I came up with.
const useHideOnScroll = () => {
const [isHidden, setIsHidden] = useState(false);
const prevScrollY = useRef<number>();
useEffect(() => {
const onScroll = () => {
const scrolledDown = window.scrollY > prevScrollY.current!;
const scrolledUp = !scrolledDown;
if (scrolledDown && !isHidden) {
setIsHidden(true);
} else if (scrolledUp && isHidden) {
setIsHidden(false);
}
prevScrollY.current = window.scrollY;
};
window.addEventListener("scroll", onScroll);
return () => {
window.removeEventListener("scroll", onScroll);
};
}, [isHidden]);
return isHidden;
};
Usage:
const shouldHide = useHideOnScroll();
return shouldHide ? null : <div>something</div>
It's still suboptimal, because we reassign the onScroll when the isHidden changes. Everything else felt too hacky and undocumented. I'm really interested in finding a way to do the same, without reassigning onScroll. Comment if you know a way :)

Resources