Generate Random ChatRoom id for your next chat app

Amin Deraiya — Wed, 17 Aug 2022 05:10:00 +0000

Function to generate ChatRoom Id:

function generate_chatRoom_id(id1, id2) {
  const sorted = [id1, id2].sort();
  const id = sorted[0] + sorted[1];
  return id;
}

React detect div reach top and bottom

Amin Deraiya — Thu, 04 Aug 2022 06:30:00 +0000

Detect Div reaches to bottom

import React, { useRef } from "react";

export default function App() {
  const listInnerRef = useRef();

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

  return (
    <div>
      <div
        onScroll={onScroll}
        ref={listInnerRef}
        style={{ height: "200px", overflowY: "auto" }}
      >
        {Array(200)
          .fill()
          .map((_, i) => {
            return <p key={i}>{i}</p>;
          })}
      </div>
    </div>
  );
}

Detect Div reaches to Top

import React, { useRef } from "react";

export default function App() {
  const listInnerRef = useRef();

  const onScroll = () => {
    if (listInnerRef.current) {
      const { scrollTop } = listInnerRef.current;
      console.log({ scrollTop });

      if (scrollTop === 0) {
        console.log("reached Top");
      }
    }
  };

  return (
    <div>
      <div
        onScroll={onScroll}
        ref={listInnerRef}
        style={{ height: "200px", overflowY: "auto" }}
      >
        {Array(200)
          .fill()
          .map((_, i) => {
            return <p key={i}>{i}</p>;
          })}
      </div>
    </div>
  );
}

DEV Community: Amin Deraiya

Generate Random ChatRoom id for your next chat app

React detect div reach top and bottom