Ищу плагин для ReactJs для сортировки данных с анимацией типо Isotope
Уже как три дня ищу ничего нормального работающего с примером не могу найти.
Пробовал использовать сам Isotope не получилось.
Хотель использовать Shuffle.js но не смог найти пример кода для реакта
Использовал React-flip-move но у него нету сортировки кнопками
Если вы покажите примером или хотя бы укажите ссылку на банально простой пример React-а с Isotope(или что то похожее не обязательно Isotope) буду рад
Внизу простой пример
$('.items-wrapper').isotope({
itemSelector: '.item',
filter: "*"
});
$('.menu li').click(function(){
var selector = $(this).attr('data-filter');
$('.items-wrapper').isotope({
filter: selector,
})
$('.menu li.active').removeClass('active');
$(this).addClass('active');
});
h1 {
color: darkred;
text-align: center;
}
ul li {
cursor: pointer;
display: inline-block;
margin: 20px;
font-size: 20px;
text-transform: capitalize;
tansition: ease-in-out .3s;
}
ul li.active {
color: darkorange;
}
.item {
background-color: #333;
text-align: center;
color: #fff;
height: 200px;
width: 30%;
overflow: hidden;
display: block;
margin: 1%;
line-height: 200px;
}
<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.js"></script>
<!-- Кнопки для-isotope -->
<ul class="menu">
<li data-filter="*" class="active">all</li>
<li data-filter=".home">home</li>
<li data-filter=".blog">blog</li>
<li data-filter=".about">about</li>
<li data-filter=".contact">contact</li>
</ul>
<div class="items-wrapper">
<div class="item home">home</div>
<div class="item blog">blog</div>
<div class="item about">about</div>
<div class="item contact">contact</div>
<div class="item about">about</div>
<div class="item blog">blog</div>
<div class="item contact">contact</div>
<div class="item home">home</div>
</div>