@1233211

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

Как написать такой switcher на react?
https://codepen.io/asistapl/pen/JKmkwJ
  • Вопрос задан
  • 350 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега React
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/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы