how to implement mixitup js library in react js app

Question

i need to implement mixitup js library into my component in reactjs app how can i do that?

this is latest version of react

i've already installed it

npm i mixitup --save

what should i do after that

here is my code

<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>

i am expecting it to click on one of the controls and it filters the items according to what i've clicked with animation of course :)

Answer 1

Just use an useEffect hook and it should work

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>
  );
}