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?
isotope.current?.getFilteredItemElements().length seems to returning filtered item's length.