PoppingPopper Comments

Then I realized I used to have a reason for why I needed to listen to width changes. But not anymore. So I removed all that code and just let the width fill the flex container and its working. <:Laughing_Facepalm:1084929862810222622>

30 replies

RReactiflux

•Created by PoppingPopper on 10/18/2023 in #help-threads-react

poppingpopper – 19-07 Oct 18

30 replies

RReactiflux

•Created by PoppingPopper on 10/18/2023 in #help-threads-react

poppingpopper – 19-07 Oct 18

30 replies

RReactiflux

•Created by PoppingPopper on 10/18/2023 in #help-threads-react

poppingpopper – 19-07 Oct 18

The width is definitely being affected by the graphs as I'm only using the responsive width for the graphs. The width is being used like so in my charts

  const [parentElement, setParentElement] = useState<HTMLElement | null>(null)
  const { width: parentWidth } = useDebouncedResizeObserver(parentElement, 100)

  const CHART_HEIGHT = 200
  const CHART_WIDTH = useMemo(() => {
    return Math.max(parentWidth - 60, 0)
  }, [parentWidth])

  ...

  return (
    <div
      ref={(e) => {
        if (!e) return
        setParentElement(e.parentElement)
      }}
    >
    ...
    <div
      style={{
        height: CHART_HEIGHT,
        width: CHART_WIDTH,
      }}
    >

  const [parentElement, setParentElement] = useState<HTMLElement | null>(null)
  const { width: parentWidth } = useDebouncedResizeObserver(parentElement, 100)

  const CHART_HEIGHT = 200
  const CHART_WIDTH = useMemo(() => {
    return Math.max(parentWidth - 60, 0)
  }, [parentWidth])

  ...

  return (
    <div
      ref={(e) => {
        if (!e) return
        setParentElement(e.parentElement)
      }}
    >
    ...
    <div
      style={{
        height: CHART_HEIGHT,
        width: CHART_WIDTH,
      }}
    >

30 replies

RReactiflux

•Created by PoppingPopper on 10/18/2023 in #help-threads-react

poppingpopper – 19-07 Oct 18

I'm trying to see if it's possible to get a deployed link but I don't konw yet.

30 replies

RReactiflux

•Created by PoppingPopper on 10/18/2023 in #help-threads-react

poppingpopper – 19-07 Oct 18

I think I'm experiencing a cascading effect where the width changes but the child content is choking it between width changes.

30 replies

RReactiflux

•Created by PoppingPopper on 10/18/2023 in #help-threads-react

poppingpopper – 19-07 Oct 18

Yea, what do you want me to do exactly? Just print the width change out without the graphs present?

30 replies

RReactiflux

•Created by PoppingPopper on 10/18/2023 in #help-threads-react

poppingpopper – 19-07 Oct 18

30 replies

RReactiflux

•Created by PoppingPopper on 10/18/2023 in #help-threads-react

poppingpopper – 19-07 Oct 18

Here is the resize observer hook:

import { useEffect, useState } from 'react'
import { useDebouncedCallback } from 'use-debounce'

interface Dimensions {
  width: number
  height: number
}

export function useDebouncedResizeObserver(element: HTMLElement | null, delay: number): Dimensions {
  const [dimensions, setDimensions] = useState<Dimensions>({ width: 0, height: 0 })
  const delayedSetDimensions = useDebouncedCallback(setDimensions, delay)

  useEffect(() => {
    if (!element) return

    const resizeObserver = new ResizeObserver((entries) => {
      const { width, height } = entries[0].contentRect
      delayedSetDimensions(() => ({ width, height }))
    })

    resizeObserver.observe(element)

    // Cleanup observer on unmount
    return () => {
      resizeObserver.unobserve(element)
    }
  }, [element, delayedSetDimensions])

  return dimensions
}

import { useEffect, useState } from 'react'
import { useDebouncedCallback } from 'use-debounce'

interface Dimensions {
  width: number
  height: number
}

export function useDebouncedResizeObserver(element: HTMLElement | null, delay: number): Dimensions {
  const [dimensions, setDimensions] = useState<Dimensions>({ width: 0, height: 0 })
  const delayedSetDimensions = useDebouncedCallback(setDimensions, delay)

  useEffect(() => {
    if (!element) return

    const resizeObserver = new ResizeObserver((entries) => {
      const { width, height } = entries[0].contentRect
      delayedSetDimensions(() => ({ width, height }))
    })

    resizeObserver.observe(element)

    // Cleanup observer on unmount
    return () => {
      resizeObserver.unobserve(element)
    }
  }, [element, delayedSetDimensions])

  return dimensions
}

Here is the usage of the width returned

  const [parentElement, setParentElement] = useState<HTMLElement | null>(null)
  const { width: parentWidth } = useDebouncedResizeObserver(parentElement, 100)

  const CHART_HEIGHT = 200
  const CHART_WIDTH = useMemo(() => {
    return Math.max(parentWidth - 60, 0)
  }, [parentWidth])

  ...

  return (
    <div
      ref={(e) => {
        if (!e) return
        setParentElement(e.parentElement)
      }}
    >
    ...
    <div
      style={{
        height: CHART_HEIGHT,
        width: CHART_WIDTH,
      }}
    >

  const [parentElement, setParentElement] = useState<HTMLElement | null>(null)
  const { width: parentWidth } = useDebouncedResizeObserver(parentElement, 100)

  const CHART_HEIGHT = 200
  const CHART_WIDTH = useMemo(() => {
    return Math.max(parentWidth - 60, 0)
  }, [parentWidth])

  ...

  return (
    <div
      ref={(e) => {
        if (!e) return
        setParentElement(e.parentElement)
      }}
    >
    ...
    <div
      style={{
        height: CHART_HEIGHT,
        width: CHART_WIDTH,
      }}
    >

30 replies

RReactiflux

•Created by PoppingPopper on 1/6/2023 in #help-js

PoppingPopper – 01-26 Jan 6

Nevermind! Post increment

2 replies

RReactiflux

•Created by PoppingPopper on 10/8/2022 in #react-forum

setInterval without destroying it to update state?

Looks like the answer I'm looking for is to not read state at all and instead use local values.

5 replies

RReactiflux

•Created by PoppingPopper on 1/20/2022 in #help-js

PoppingPopper – 19-41 Jan 20

Thank you @slightlytyler ❤️

6 replies