anonn – 16-33 Oct 14

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.
A
anonn552d ago
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>
);
};
UU
Unknown User552d ago
A
anonn552d ago
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!!
UU
Unknown User552d ago
A
anonn552d ago
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!
UU
Unknown User552d ago
A
anonn552d ago
Yeah im trying to implement it myself to learn
UU
Unknown User551d ago