0

Ищу плагин для 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>

1 ответ 1

1

Вот так. В итоге получаем неплохое приложение, которое даже будет реагировать на изменение state из дочерних компонентов через переданные функции или тупо из devTools. Расписывать все лень. Если что-то конкретно не понятно - спрашивай.

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/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.js"></script>


<div id="root"></div>

<script type="text/babel">
  class App extends React.Component {
    constructor() {
      super();
      this.state = {
        activeGroup: "all"
      }
      
      this.handlers = {
        onClick: group => {
          this.setState({
            activeGroup: group
          })
        },
        isotopChangeGroup: group => {
          $(this.itemsWrapper).isotope({
            filter: (group === "all" ? "*" : "." + group)
          });
        }
      }
      
      this.data = {
        groups: ["all", "home", "blog", "about", "contact"]
      }
      
      this.itemsWrapper = null;
    }
    
    componentDidMount() {
      $(this.itemsWrapper).isotope({
        itemSelector: ".item",
        filter: (this.state.activeGroup === "all" ? "*" : "." + this.state.activeGroup)
      });
    }
    
    componentDidUpdate() {
      this.handlers.isotopChangeGroup(this.state.activeGroup);
    }
    
    render() {
      return (
        <div>
          <ul className="menu">
            {
              this.data.groups.map(item => {
                return <li onClick={() => this.handlers.onClick(item)} className={this.state.activeGroup === item ? "active" : ""}>{item}</li>
              })
            }
          </ul>

          <div ref={el => {this.itemsWrapper = el}}>
            <div className="item home">home</div>
            <div className="item blog">blog</div>
            <div className="item about">about</div>
            <div className="item contact">contact</div>
            <div className="item about">about</div>
            <div className="item blog">blog</div>
            <div className="item contact">contact</div>
            <div className="item home">home</div>
          </div>
        </div>
      )
    }
  }
  
  ReactDOM.render(
			<App />,
			document.getElementById("root")
  );
</script>

6
  • спасибо вам большое.А какой у вас опыт на реакте? 🤔
    – Demon __
    18 янв 2019 в 12:24
  • @Demon__ANT 5 месяцев или 2 проекта)) 18 янв 2019 в 12:31
  • при том же самом коде только в версии реакта 16.7.0 получаю ошибку isotope is not a function .
    – Demon __
    18 янв 2019 в 14:15
  • Вы его подключили (isotope), а jq? 18 янв 2019 в 14:21
  • 1
    @Demon__ANT сначала jq импортируйте, потом isotope. Проверьте в componentDidMount console.log($.fn.isotope); Приравняйте явно $.fn.isotope = Isotope. Isotope может работать на чистом js, в вашем случае даже удобнее будет. 18 янв 2019 в 14:29

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.