R
Reactiflux

help-threads-react

anonn – 16-33 Oct 14

Aanonn10/14/2022
How can I access the styles of an element before it is rendered? I have implemented a custom progress slider. Is there any way for me to access the width of the wrapper div in initialSliderWidth without needing to manually write it? Using refs doesn't work because the component hasn't rendered yet.
type Props = {};

const SliderComponent = (props: Props) => {
const context = useNotUndefinedContext(AppContext);
const slider = useRef(null) as any;
const circle = useRef(null) as any;
let initialMouseX: number;
// How to dynamically access slider width?
const initialSliderWidth = 400;
let sliderWidth: number;
let offset: number = -1;

const handleMouseMove = (mouseMoveEvent: any) => {
const movedMouseX: number = mouseMoveEvent.clientX;

let distanceMouseMovedX: number = -(movedMouseX - initialMouseX);

const numifiedSliderWidth: number = sliderWidth;

console.log(numifiedSliderWidth);

const newWidth: number = numifiedSliderWidth - distanceMouseMovedX;

if (newWidth > initialSliderWidth) {
return;
} else if (newWidth < 10) {
return;
}

const newLength = Math.round((newWidth / initialSliderWidth) * 10);

context.setPasswordLength(newLength !== 0 ? newLength : 1);

slider.current.style.width = `${String(newWidth)}px`;
circle.current.style.right = `${String(distanceMouseMovedX + offset)}px`;
};
const handleMouseDown = (mouseDownEvent: React.MouseEvent) => {
mouseDownEvent.preventDefault();
initialMouseX = mouseDownEvent.clientX;
sliderWidth = numifyStyles(window.getComputedStyle(slider.current).width);
offset = numifyStyles(circle.current.style.right);
circle.current.classList.remove("bg-grey-light");
circle.current.classList.add(
"bg-grey-dark",
"border-solid",
"border-coral",
"border-2"
);
};
return (
<div className="block h-[10px] bg-black mt-[32px] relative">
<div ref={slider} className="block h-[10px] bg-coral w-full h-full absolute"></div>
<div ref={circle} onMouseDown={handleMouseDown} className="absolute appearance-none bg-grey-light rounded-full w-[28px] h-[28px] inline-block align-middle -right-1 -translate-y-[9px]"></div>
</div>
);
};
type Props = {};

const SliderComponent = (props: Props) => {
const context = useNotUndefinedContext(AppContext);
const slider = useRef(null) as any;
const circle = useRef(null) as any;
let initialMouseX: number;
// How to dynamically access slider width?
const initialSliderWidth = 400;
let sliderWidth: number;
let offset: number = -1;

const handleMouseMove = (mouseMoveEvent: any) => {
const movedMouseX: number = mouseMoveEvent.clientX;

let distanceMouseMovedX: number = -(movedMouseX - initialMouseX);

const numifiedSliderWidth: number = sliderWidth;

console.log(numifiedSliderWidth);

const newWidth: number = numifiedSliderWidth - distanceMouseMovedX;

if (newWidth > initialSliderWidth) {
return;
} else if (newWidth < 10) {
return;
}

const newLength = Math.round((newWidth / initialSliderWidth) * 10);

context.setPasswordLength(newLength !== 0 ? newLength : 1);

slider.current.style.width = `${String(newWidth)}px`;
circle.current.style.right = `${String(distanceMouseMovedX + offset)}px`;
};
const handleMouseDown = (mouseDownEvent: React.MouseEvent) => {
mouseDownEvent.preventDefault();
initialMouseX = mouseDownEvent.clientX;
sliderWidth = numifyStyles(window.getComputedStyle(slider.current).width);
offset = numifyStyles(circle.current.style.right);
circle.current.classList.remove("bg-grey-light");
circle.current.classList.add(
"bg-grey-dark",
"border-solid",
"border-coral",
"border-2"
);
};
return (
<div className="block h-[10px] bg-black mt-[32px] relative">
<div ref={slider} className="block h-[10px] bg-coral w-full h-full absolute"></div>
<div ref={circle} onMouseDown={handleMouseDown} className="absolute appearance-none bg-grey-light rounded-full w-[28px] h-[28px] inline-block align-middle -right-1 -translate-y-[9px]"></div>
</div>
);
};
UUUnknown User10/14/2022
3 Messages Not Public
Sign In & Join Server To View
Aanonn10/14/2022
Yeah exactly, I wanna access the initial width immediately...but Im not able to access the initial width until after it renders, so kinda unsure how to solve this issue Was trying to implement my own progress slider to learn...and judging from how ugly the code is seems like ive got a lot to learn haha thank you!!
UUUnknown User10/14/2022
2 Messages Not Public
Sign In & Join Server To View
Aanonn10/14/2022
Ooh that's an interesting idea, so just absolutely position the circle to the edge of the rectangle bar thingo, then when you change the width of the rectangle bar, you change the circle location also!
UUUnknown User10/14/2022
Message Not Public
Sign In & Join Server To View
Aanonn10/14/2022
Yeah im trying to implement it myself to learn
UUUnknown User10/15/2022
Message Not Public
Sign In & Join Server To View

Looking for more? Join the community!

R
Reactiflux

help-threads-react

Join Server