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?