Category: React Answers

Sometimes, we want to detect when user scrolls to bottom of div with React.

In this article, we’ll look at how to detect when user scrolls to bottom of div with React.

How to detect when user scrolls to bottom of div with React?

To detect when user scrolls to bottom of div with React, we check if the sum of the scrollTop and clientHeight of the scroll container is the same as its scrollHeight.

For instance, we write

import React, { useRef, useEffect } from "react";

const MyListComponent = () => {
  const listInnerRef = useRef();

  const onScroll = () => {
    if (listInnerRef.current) {
      const { scrollTop, scrollHeight, clientHeight } = listInnerRef.current;
      if (scrollTop + clientHeight === scrollHeight) {
        // ...
        console.log("Reached bottom");
      }
    }
  };

  return (
    <div className="list">
      <div className="list-inner" onScroll={onScroll} ref={listInnerRef}>
        {/* List items */}
      </div>
    </div>
  );
};

to call onScroll when we scroll by setting the onScroll prop of the div to onScroll.

Then we assign a listInnerRef to the div.

In onScroll, we check if the sum of the scrollTop and clientHeight of the scroll container is the same as its scrollHeight.

If it is, then the bottom of the element is reached.

Conclusion

To detect when user scrolls to bottom of div with React, we check if the sum of the scrollTop and clientHeight of the scroll container is the same as its scrollHeight.

Sometimes, we want to prevent multiple times button press with React.

In this article, we’ll look at how to prevent multiple times button press with React.

How to prevent multiple times button press with React?

To prevent multiple times button press with React, we can set the disabled prop of the button.

For instance, we write

import React, { useState } from "react";

const Button = () => {
  const [double, setDouble] = useState(false);
  return (
    <button
      disabled={double}
      onClick={() => {
        // ...
        setDouble(true);
      }}
    />
  );
};

export default Button;

to set disabled to the double state.

And we call setDouble with true to set double to true after the first click.

Conclusion

To prevent multiple times button press with React, we can set the disabled prop of the button.

Sometimes, we want to create constants file with React.

In this article, we’ll look at how to create constants file with React.

How to create constants file with React?

To create constants file with React, we can create a JavaScript file with variables exported.

For instance, we write

fileWithConstants.js

export const ACTION_INVALID = "This action is invalid!";
export const CONSTANT_NUMBER_1 = "hello I am a constant";
export const CONSTANT_NUMBER_2 = "hello I am also a constant";

to export the ACTION_INVALID, CONSTANT_NUMBER_1 and CONSTANT_NUMBER_2 constants in a file.

Then we can use them by writing

import * as consts from "path/to/fileWithConstants";

const errorMsg = consts.ACTION_INVALID;

to import all the contents of fileWithConstants.js that are export and reference ACTION_INVALID with consts.ACTION_INVALID.

How to create constants file with React?

To create constants file with React, we can create a JavaScript file with variables exported.

Sometimes, we want to trigger onChange if input value is changing by state with React.

In this article, we’ll look at how to trigger onChange if input value is changing by state with React.

How to trigger onChange if input value is changing by state with React?

To trigger onChange if input value is changing by state with React, we can watch for state change with the useEffect hook.

For instance, we write

const MyInputComponent = () => {
  const [numberValue, setNumberValue] = useState(0);
  const numberInput = useRef(null);

  useEffect(() => {
    numberInput.current.dispatchEvent(
      new Event("change", {
        detail: {
          newValue: numberValue,
        },
        bubbles: true,
        cancelable: true,
      })
    );
  }, [numberValue]);

  return (
    <>
      <input
        type="number"
        value={numberValue}
        ref={numberInput}
        inputMode="numeric"
        onChange={(e) => setNumberValue(e.target.value)}
      />
    </>
  );
};

to add an input that’s bound to the numberValue state with the onChange and value props.

value is set to numberValue to display numberValue as the input value.

onChange is set to (e) => setNumberValue(e.target.value) to set the numberValue state to a value.

Then we call useEffect hook with [numberValue] to call the useEffect callback when the numberValue state changes.

Conclusion

To trigger onChange if input value is changing by state with React, we can watch for state change with the useEffect hook.

Sometimes, we want to get a div’s offsetTop positions in React.

In this article, we’ll look at how to get a div’s offsetTop positions in React.

How to get a div’s offsetTop positions in React?

To get a div’s offsetTop positions in React, we can get it from the ref assigned to the element.

For instance, we write

import { useRef } from "react";

function Component() {
  const inputRef = useRef();

  return (
    <>
      <input ref={inputRef} />
      <div
        onScroll={() => {
          const { offsetTop } = inputRef.current;
          //...
        }}
      >
        ...
      </div>
    </>
  );
}

to assign the inputRef to the input.

Then we get the offsetTop property from the inputRef.current property which has the input element.

Conclusion

To get a div’s offsetTop positions in React, we can get it from the ref assigned to the element.