1

I'm a newbie in ReactJS and I'm busy reacting a project with it.

I'm required to use Isotope for an images gallery but apparently, React doesn't allow another library to interact with the DOM.

So I've been searching for how to integrate Isotope with React but cannot find anything on the internet.

This is my actual code

var $isotope = $('.gallery').isotope({});
$('.controls').on('click', 'button', function() {
  var filterValue = $(this).attr('data-filter');
  $isotope.isotope({
    filter: filterValue
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />


<div class="container">
  <div class="row">
    <div class="col">
      <div class="controls text-center">
        <button type="button" class="btn btn-success control btn-sm" data-filter=".a">A</button>
        <button type="button" class="btn btn-primary control btn-sm" data-filter=".b">B</button>
        <button type="button" class="btn btn-warning control btn-sm" data-filter=".c">C</button>
        <button type="button" class="btn btn-danger control btn-sm" data-filter="*">All</button>
      </div>
    </div>
    <hr>
  </div>
  <div class="gallery row">
    <div class=" mix a" style="background-color: green; height:20px; width: 70px"></div>
    <div class=" mix c" style="background-color: orange; height:20px; width: 70px"></div>
    <div class=" mix a" style="background-color: green; height:20px; width: 70px"></div>
    <div class=" mix c" style="background-color: orange; height:20px; width: 70px"></div>
    <div class=" mix b" style="background-color: skyblue; height:20px; width: 70px"></div>
  </div>
</div>

Can somebody help with a ReactJS version of this code?

Jonathan
  • 1,926
  • 2
  • 17
  • 34
  • Possible duplicate of https://stackoverflow.com/questions/25135261/react-js-and-isotope-js . Consider updating the question with your current attempt if you have problems with it, because answers are old and may not be applicable to newer React versions. – Estus Flask Jan 29 '19 at 19:54
  • @estus this is why I'm here since I can't find a recent attempt and don't know how to do it without using JQuery which I don't want to do. jsfiddle on that link doesn't work – Jonathan Jan 29 '19 at 19:56
  • Did you see this answer? https://stackoverflow.com/a/44610610/3731501 – Estus Flask Jan 29 '19 at 20:00

0 Answers0