Breaking News: Grepper is joining You.com. Read the official announcement!

event listener for functional component

Rich Rhinoceros answered on January 27, 2021 Popularity 9/10 Helpfulness 4/10

answer event listener for functional component

related give div event listener functional component

event listener for functional component

Comment

import React, { useEffect } from 'react';

const Component = (props) => {  
  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
  });
  useEffect(() => {
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  function handleScroll() {
    let scrollTop = window.scrollY;
  }


  return ()
}

Popularity 9/10 Helpfulness 4/10 Language javascript

Source: stackoverflow.com

Tags: event-listener javascript

Link to this answer
Share Copy Link

Contributed on Jan 27 2021

Rich Rhinoceros

0 Answers Avg Quality 2/10

Closely Related Answers

give div event listener functional component

Comment

import React, { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const App = () => {
  // set default value
  const [scrollTop, setScrollTop] = useState(document.body.scrollTop);

  // create element ref
  const innerRef = useRef(null);

  useEffect(() => {
    const div = innerRef.current;
    // subscribe event
    div.addEventListener("scroll", handleOnScroll);
    return () => {
      // unsubscribe event
      div.removeEventListener("scroll", handleOnScroll);
    };
  }, []);

  const handleOnScroll = (e) => {
    // NOTE: This is for the sake of demonstration purpose only.
    // Doing this will greatly affect performance.
    setScrollTop(e.target.scrollTop);
  }

  return (
    <>
      {`ScrollTop: ${scrollTop}`}
      <div
        style={{
          overflow: 'auto',
          width: 500,
          height: 500,
          border: '1px solid black',
        }}
        ref={innerRef}
      >
        <div style={{ height: 1500, width: 1500 }}>
          Scroll Me
        </div>
      </div>
    </>
  )
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Popularity 5/10 Helpfulness 6/10 Language javascript

Source: stackoverflow.com

Tags: event-listener javascript

Link to this answer
Share Copy Link

Contributed on Mar 29 2022

Hacker12_super1

0 Answers Avg Quality 2/10

event listener for functional component

Contents

More Related Answers

event listener for functional component

Closely Related Answers

give div event listener functional component

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.