I look for a plug-in for ReactJs for sorting data with animation as Isotope

For three days already, I have been looking for nothing normal working with an example I cannot find.

I tried to use Isotope myself failed.

Wanted to use shuffle.js but could not find sample code for react

Used React-flip-move but it doesn’t have sorting with buttons

If you show an example or at least provide a link to a trite simple React example with Isotope (or something similar is not necessarily Isotop e) I will be glad

Below is a simple example.

$('.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 answer 1

    Like this. As a result, we get a good application that will even respond to the change of state from child components through the functions passed or stupidly from devTools. Paint all laziness. If something specifically is not clear - ask.

     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>

    • Thank you very much. What is your experience on the reactor? 🤔 - Demon __ ANT
    • @Demon__ANT 5 months or 2 projects)) - Misha Saidov
    • with the same code, only in version 16.7.0 I get an isotope is not a function error. - Demon __ ANT
    • Have you connected it (isotope), and jq? - Misha Saidov
    • one
      @Demon__ANT jq import first, then isotope. Check in componentDidMount console.log($.fn.isotope); Equate explicitly $.fn.isotope = Isotope . Isotope can work on pure js, in your case it will be even more convenient. - Misha Saidov