reactjstypescriptjquery-isotope

How to find the filtered items count from React(Typescript) isotope-layout


I'm working with isotope-layout library in React(Typescript). I was able to manage to filter working in my page. but I'm not sure how to return filtered item count.

on page load, i'm initializing Isotope.

useEffect(() => {  
    isotope.current = new Isotope(".iso-filter-container", {
      itemSelector: ".iso-filter-item",
      masonry: {
        columnWidth: 50,  
        gutter: 12        
      } ,   
    });   

    // cleanup
     return () => isotope.current?.destroy();
  }, [fullcatalog]); 

onFilterChange handles filter value and execute arrange.

 const onFilterChange = (val : Types.SelectedFilterValue ) => {          
   var _str =  val.filterValue.map( x => ('(\\|' + x + '\\|)')).join('|');

   var filterFns = { 
      //match
      matches: function(itemelement : Element) {
        if(itemelement != null) {
          try{
            var strTarget : string  = itemelement.getAttribute('data-' + val.filterType.toLowerCase()) ?? '';  
             return strTarget.match(new RegExp(_str, "i"));
          }catch(e) {
            console.log(e);
          }
        }     
      },  
  };

  // use matching filter function
  let pattern : any = filterFns['matches']  || '*';    
  isotope.current?.arrange({ filter: pattern });     
 };

after isotope is arranged, how to get filtered item count?


Solution

  • isotope.current?.getFilteredItemElements().length seems to returning filtered item's length.