I have got Component with scroll bar inside it. I would like to know when the scroll bar reaches the top of the component.
Please if anybody can guide me...
Created an example for you on codesandbox
Simplified example:
function Component() {
const ref = useRef(null);
useEffect(() => {
const element = ref.current;
const handleScroll = (e) => {
if (element.scrollTop === 0) {
console.log("do something");
// do whatever you want here
}
};
element.addEventListener("scroll", handleScroll);
return () => element.removeEventListener("scroll", handleScroll);
}, []);
return (
<div ref={ref}></div>
);
}
You can also make a hook out of it if you want to.
You can use the scroll event. No need for ref.
class MyComponent extends React.Component {
handleScroll=(evt)=> { // use this of object instance
if(!evt.currentTarget.scrollTop) {
}
}
render() {
return '<div onScroll={this.handleScroll}></div>';
}
}
Related
I'm trying to create a functional component that fetches data from an API and renders it to a list. After the data is fetched and rendered I want to check if the URL id and list item is equal, if they are then the list item should be scrolled into view.
Below is my code:
import React, { Fragment, useState, useEffect, useRef } from "react";
export default function ListComponent(props) {
const scrollTarget = useRef();
const [items, setItems] = useState([]);
const [scrollTargetItemId, setScrollTargetItemId] = useState("");
useEffect(() => {
const fetchData = async () => {
let response = await fetch("someurl").then((res) => res.json());
setItems(response);
};
fetchData();
if (props.targetId) {
setScrollTargetItemId(props.targetId)
}
if (scrollTarget.current) {
window.scrollTo(0, scrollTarget.current.offsetTop)
}
}, [props]);
let itemsToRender = [];
itemsToRender = reports.map((report) => {
return (
<li
key={report._id}
ref={item._id === scrollTargetItemId ? scrollTarget : null}
>
{item.payload}
</li>
);
});
return (
<Fragment>
<ul>{itemsToRender}</ul>
</Fragment>
);
}
My problem here is that scrollTarget.current is always undefined. Please advice what I'm doing wrong. Thanks in advance.
Using useCallback, as #yagiro suggested, did the trick!
My code ended up like this:
const scroll = useCallback(node => {
if (node !== null) {
window.scrollTo({
top: node.getBoundingClientRect().top,
behavior: "smooth"
})
}
}, []);
And then I just conditionally set the ref={scroll} on the node that you want to scroll to.
That is because when a reference is changed, it does not cause a re-render.
From React's docs: https://reactjs.org/docs/hooks-reference.html#useref
Keep in mind that useRef doesn’t notify you when its content changes. Mutating the .current property doesn’t cause a re-render. If you want to run some code when React attaches or detaches a ref to a DOM node, you may want to use a callback ref instead.
constructor(props) {
thi.modal = React.createRef();
}
handleSwitch() {
// debugger
this.setState({ errors: [] }, function () {
this.modal.current.openModal('signup') // it will call function of child component of Modal
});
// debugger
}
return(
<>
<button className="login-button" onClick={this.handleSwitch}>Log in with email</button>
<Modal ref={this.modal} />
</>
)
React Hooks will delay the scrolling until the page is ready:
useEffect(() => {
const element = document.getElementById('id')
if (element)
element.scrollIntoView({ behavior: 'smooth' })
}, [])
If the element is dynamic and based on a variable, add them to the Effect hook:
const [variable, setVariable] = useState()
const id = 'id'
useEffect(() => {
const element = document.getElementById(id)
if (element)
element.scrollIntoView({ behavior: 'smooth' })
}, [variable])
Hello I'm trying to pass the following code to reacthooks:
import { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';
class SomeComponent extends React.Component {
// 2. Initialise your ref and targetElement here
targetRef = React.createRef();
targetElement = null;
componentDidMount() {
// 3. Get a target element that you want to persist scrolling for (such as a modal/lightbox/flyout/nav).
// Specifically, the target element is the one we would like to allow scroll on (NOT a parent of that element).
// This is also the element to apply the CSS '-webkit-overflow-scrolling: touch;' if desired.
this.targetElement = this.targetRef.current;
}
showTargetElement = () => {
// ... some logic to show target element
// 4. Disable body scroll
disableBodyScroll(this.targetElement);
};
hideTargetElement = () => {
// ... some logic to hide target element
// 5. Re-enable body scroll
enableBodyScroll(this.targetElement);
}
componentWillUnmount() {
// 5. Useful if we have called disableBodyScroll for multiple target elements,
// and we just want a kill-switch to undo all that.
// OR useful for if the `hideTargetElement()` function got circumvented eg. visitor
// clicks a link which takes him/her to a different page within the app.
clearAllBodyScrollLocks();
}
render() {
return (
// 6. Pass your ref with the reference to the targetElement to SomeOtherComponent
<SomeOtherComponent ref={this.targetRef}>
some JSX to go here
</SomeOtherComponent>
);
}
}
And then I did the following with hooks:
const [modalIsOpen, setIsOpen] = useState(false);
const openModal = () => {
setIsOpen(true);
};
const closeModal = () => {
setIsOpen(false);
};
const targetRef = useRef();
const showTargetElement = () => {
disableBodyScroll(targetRef);
};
const hideTargetElement = () => {
enableBodyScroll(targetRef);
};
useEffect(() => {
if (modalIsOpen === true) {
showTargetElement();
} else {
hideTargetElement();
}
}, [modalIsOpen]);
I don't know if I did it correctly with useRef and useEffect, but it worked, but I can't imagine how I'm going to get to my componentWillUnmount to call mine:
clearAllBodyScrollLocks ();
The basic equivalents for componentDidMount and componentWillUnmount in React Hooks are:
//componentDidMount
useEffect(() => {
doSomethingOnMount();
}, [])
//componentWillUnmount
useEffect(() => {
return () => {
doSomethingOnUnmount();
}
}, [])
These can also be combined into one useEffect:
useEffect(() => {
doSomethingOnMount();
return () => {
doSomethingOnUnmount();
}
}, [])
This process is called effect clean up, you can read more from the documentation.
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>
);
}
This code has worked for me before but i'm not sure what's changed in this other component i'm trying to use it in.
I've tried using hooks to open and close modal and just plain on click event listener but both times it closes on clicking anywhere on the page.
componentDidMount() {
document.addEventListener('click', this.handleOutsideClick);
}
componentWillUnmount() {
document.removeEventListener('click', this.handleOutsideClick);
}
handleOutsideClick = (e) => {
if (this.state.showInfoModal && !this.node.contains(e.target)) this.handleInfoToggle();
console.log(this.state.showInfoModal, e.target, this.node, 'clicked outside');
}
handleInfoToggle = (event) => {
const { showInfoModal } = this.state;
if (event) event.preventDefault();
this.setState({ showInfoModal: !showInfoModal });
};
renderSomething = (args) => {
return(
<span ref={(node) => { this.node = node; }}>
{something === true && <span className={styles.somethingelse}>
<HintIcon onClick={this.handleInfoToggle} /></span>}
<Modal visible={showInfoModal} onCancel={this.handleInfoToggle}>
some information to show
</Modal>
</span>
)
}
render() => {
return (
{this.renderSomething(args)}
)
}
Not sure if this is enough info. but this is driving me nuts.
I also tried adding a dontCloseModal function that someone had suggested:
dontCloseModal = (e) => {
e.stopPropagation();
console.log(e);
this.setState({
showInfoModal: true
});
}
<div onClick={this.dontCloseModal}></div>
(((this would go around the <Modal/> component )))
const refs = React.createRef(); // Setup to wrap one child
const handleClick = (event) => {
const isOutside = () => {
return !refs.current.contains(event.target);
};
if (isOutside) {
onClick();
}
};
useEffect(() => {
document.addEventListener('click', handleClick);
return function() {
document.removeEventListener('click', handleClick);
};
});
return (element, idx) => React.cloneElement(element, { ref: refs[idx] });
}
export default ClickOutside;
Tried using a component like this ^^ and adding <ClickOutside onClick={this.closeInfoModal()}></ClickOutside>
But same issue with this too- closes on click anywhere including inside modal
After playing with this a little bit, it seems that you should also useRef here.
This will allow you to control toggling the modal if the user clicks outside and inside the modal's target.
There are a lot of sophisticated ways to achieve this. However, since we are dealing with hooks here, it would be best to use a custom hook.
Introducing useOnClick 💫:
// Custom hook for controling user clicks inside & outside
function useOnClick(ref, handler) {
useEffect(() => {
const listener = event => {
// Inner Click: Do nothing if clicking ref's element or descendent elements, similar to the solution I gave in my comment stackoverflow.com/a/54633645/4490712
if (!ref.current || ref.current.contains(event.target)) {
return;
}
// Outer Click: Do nothing if clicking wrapper ref
if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
return;
}
handler(event);
};
// Here we are subscribing our listener to the document
document.addEventListener("mousedown", listener);
return () => {
// And unsubscribing it when we are no longer showing this component
document.removeEventListener("mousedown", listener);
};
}, []); // Empty array ensures that effect is only run on mount and unmount
}
Watch this Demo in CodeSandBox so you can see how this is implemented using hooks.
Welcome to StackOverflow!
I have created a function to detect scroll status, means if the user has scrolled to the bottom of the page then 'console.log(true)' and setting state. The function name is handleScroll and I am calling that function from helper file. And in my view file, I'm calling event listener to detect scroll change using the handleScroll function inside componentDidMount & later removing event listener by unmounting.
However, when I run the code initially state is set inside 'atBottom: false'. But later if I scroll down the page the function is not called again and I can't detect whether I am bottom of the page or not.
----> View file
import { handleScroll } from 'components/Helper.jsx'
class ScrollStatus extends Component {
constructor(props) {
super(props);
this.state = {
height: window.innerHeight,
scrollBottomStatus: false,
}
}
componentDidMount() {
window.addEventListener("scroll", handleScroll(this,
this.stateHandler));
}
componentWillUnmount() {
window.removeEventListener("scroll", handleScroll(this,
this.stateHandler));
}
stateHandler = (state) => {
this.setState(state);
}
render() {
return ( <div> Long text ... </div> ) }
}
export default ScrollStatus
----> helper file
export const handleScroll = (obj, stateHandler) => {
const windowHeight = "innerHeight" in window ? window.innerHeight :
document.documentElement.offsetHeight;
const body = document.body;
const html = document.documentElement;
const docHeight = Math.max(body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight);
const windowBottom = Math.round(windowHeight + window.pageYOffset);
if (windowBottom >= docHeight) {
console.log(true)
stateHandler({
scrollBottomStatus: true
});
} else {
console.log(false)
stateHandler({
scrollBottomStatus: false
});
}
}
I want the function to keeping checking window height as I scroll down or up and keep updating the state 'isBottom' while scrolling.
I would appreciate the help.
When I check scrolling I always add a throttle (via lodash or ...) to throttle down the actions.
What I would do in your case.
1. Add eventlistener on mount, also remove on unmount.
componentDidMount = () => {
window.addEventListener('scroll', () => _.throttle(this.handleScroll, 100));
}
2. In the same component I'd handle the state update.
handleScroll = () => {
let scrollY = window.pageYOffset;
if(scrollY < 100) { this.setState({ // BLA })
}