Filterbox

Easily add dynamic filters to your next web project.

Install

npm install filterbox --save 

How to use

import { Filterbox } from "filterbox";

// Create new instance
const filterbox = new Filterbox([{
    // unique filter key
    key: 'status',
    // filter control options
    control: {
        // use it to mach against a ui component
        type: 'select',
        // default value when no option is selected
        label: 'select status',
        // select options and their corresponding values
        options: [
            { label: 'Pending', value: 0 },
            { label: 'Completed', value: 1 },
        ],
    },
}]);

// Implement match strategy
class MatchStatus implements MatchStrategy<number> {
  constructor(private status: FilterValue) {}
  match(status: number): boolean {
    // will match all if nothing is selected
    if (this.status.isNotSet()) return true;
    // match status
    return status === this.status.intoInt();
  }
}

// Subscribe to changes
filterbox.subscribe((update) => {
    // read for filter value
    const value = update.getFilter('status').value();
    console.log(`Status filter change`);

    // create new match object for updated status
    filterbox.setMatch('status', new MatchStatus(value));

    // additionally setState in React
    // setState(update);
});

// set filter value
filterbox.getFilter('status').setValue(1); // 1 : Completed

// match data
filterbox.match([0,1]); // [1]

// generate query string
const q = "?" + filterbox.queryString(); // '?status=1'

// generate request payload
filterbox.requestPayload(); // { status: '1' }

✏️ check examples folder for more

📬 [email protected]