Как динамически переключать Autoplay?

Question

[Ilya Olovyannikov]

Есть чекбокс - включить/выключить автопролистывание. По умолчанию выключено.
Передаю пропс isAuto в опции swiper autoplay={isAuto}, но при этом автоплей не работает при изменении состояния.

CodeSandbox

Пример кода:

const [isAuto, setIsAuto] = useState(false);

return (
  <div>
    <input type="checkbox" onChange={() => setIsAuto(!isAuto)}/>
    <Swiper autoplay={isAuto}>...</Swiper>
  </div>
)

Answer 1

[0xD34F]

const [ autoplay, setAutoplay ] = useState(false);
const swiper = useRef();

useEffect(() => {
  swiper.current.autoplay[autoplay ? 'start' : 'stop']();
}, [ autoplay ]);

<input
  type="checkbox"
  checked={autoplay}
  onChange={e => setAutoplay(e.target.checked)}
/>

<Swiper
  onSwiper={instance => swiper.current = instance}
  ...
>

Comments

[Ilya Olovyannikov]

Круто, работает, спасибо! Я тоже на этом ивенте пытался реф определить, но видимо меня смущали тайпскриптовые варнинги.
Еще раз - спасибо :)