Как реализовать JS-библиотеку mixitup в приложении JAC

Question

Мне нужно внедрить библиотеку mixitup js в мой компонент в приложении activjs. Как я могу это сделать?

это последняя версия реагировать

я уже установил его

npm i mixitup --save

что я должен делать после этого

вот мой код

<div class="controls">
    <ul>
        <li class="control mixitup-control" data-filter=".red">red</li>
        <li class="control mixitup-control" data-filter=".blue">blue</li>
        <li class="control mixitup-control" data-filter=".green">green</li>
    </ul>
</div>
<div class="items">
    <div class="item green"></div>
    <div class="item green"></div>
    <div class="item blue"></div>
    <div class="item yellow"></div>
</div>

я ожидаю, что он нажмет на один из элементов управления, и он фильтрует элементы в соответствии с тем, что я нажал с анимацией, конечно:)

Answer 1

Просто используйте хук useEffect, и он должен работать.

      import {useEffect} from 'react';
import mixitup from 'mixitup'

function App() {

// Just use an useEffect hook like that
useEffect(() => {
    mixitup(".items", {
      selectors: {
        target: ".item",
      },
      animation: {
        duration: 500
      }
    });
  }, []);

return (
    <div className="App">
      <YourComponents/>
    </div>
  );
}