Как написать такой switcher на react?

Question

[1233211]

Как написать такой switcher на react?
https://codepen.io/asistapl/pen/JKmkwJ

Answer 1

[0xD34F]

function Switch({ options, value, onChange }) {
  const highlight = useRef();

  useEffect(() => {
    const activeButton = highlight.current.closest('.c-switch').querySelector('.is-active');
    highlight.current.style.width = `${activeButton?.offsetWidth ?? 0}px`;
    highlight.current.style.transform = `translateX(${activeButton?.offsetLeft ?? 0}px)`;
  }, [ value ]);

  return (
    <div className="c-switch">
      <div className="c-switch__highlight" ref={highlight}></div>
      {options.map(n => (
        <button
          key={n.value}
          className={n.value === value ? 'is-active' : ''}
          onClick={() => onChange(n.value)}
        >{n.text}</button>
      ))}
    </div>
  );
}

https://jsfiddle.net/4hbkm9e8/

Comments

[1233211]

Спасибо!
А если использовать стили как модули?
className={styles.switch}
То как тут обратиться к этому классу?
highlight.current.closest и в querySelector?

[0xD34F]

1233211, подумайте.

[1233211]

0xD34F, highlight.current.closest(styles.switch).querySelector(styles.active)

пробовал так, не получилось