anonn•3y ago

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.

8 Replies

anonnOP•3y 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>
  );
};

Unknown User•3y ago

Message Not Public

anonnOP•3y 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!!

Unknown User•3y ago

Message Not Public

anonnOP•3y 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!

Unknown User•3y ago

Message Not Public

anonnOP•3y ago

Yeah im trying to implement it myself to learn

reactibot•3y ago

This thread hasn’t had any activity in 12 hours, so it’s now locked. Threads are closed automatically after 12 hours. If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/902647189120118794/1030518633983651990

anonn – 16-33 Oct 14

Did you find this page helpful?