Make absolutely positioned element [ rendered using React ] snap to edge of parent div on page load? - html

Question

I am making a two-thumb slider bar component in React, where each thumb snaps to the closest of discrete ticks so a user can visually pick from values along a number line. The problem is, as it stands the thumbs need to have position: absolute, but their parent div slots into a regular responsive layout, so the thumbs don't know ahead of time where they're going to need to be on the page - they need to get that information somehow from the parent div itself, on page load. I tried getting my useRef() to the parent div and setting the thumbs' positions within a useEffect(() => {},[]), but apparently that's not possible. How can I tell a child, the position of its parent, immediately on page load in React?

Answer 1

I came up with a hacky solution, that works: I pass the child component a the ref to the parent, and have it set its own position state repeatedly every 10ms [ so from here I have the choice I guess between toning it down to something less embarrassingly overblown but jankier-looking or finding an entirely different solution! ] from within this useInterval hook, so that when the ref to the parent becomes defined, the child snaps there immediately. There are still other bugs, but here is the working Thumb component:
import React, { useEffect, useState, useRef } from 'react';
import { useInterval } from '../utils';
function Thumb(props) {
const { thumb_key,
snap_tick,
bar_ref,
thumb_ref,
color,
n_ticks,
thumb_on_mouse_down } = props;
const [pos,set_pos] = useState(0);
let my_width;
let bar_start;
let bar_width;
useInterval(() => {
my_width = thumb_ref.current.getBoundingClientRect().width;
bar_start = bar_ref.current.getBoundingClientRect().left;
bar_width = bar_ref.current.getBoundingClientRect().width;
set_pos( ( bar_start + ( snap_tick * bar_width ) / (n_ticks - 1) - Math.floor(my_width / 2) ) );
},10);
return (
<div className="thumb-outer"
ref={thumb_ref}
style={{
height: '20px',
width: '20px',
borderRadius: '50%',
backgroundColor: color,
position: 'absolute',
left: pos + 'px',
cursor: 'grab',
dataKey: thumb_key,
}}
onMouseDown={e => thumb_on_mouse_down(e, thumb_key)}
>
</div>
)
};
export default Thumb;