Filterbox

Add filters to your next web project — In Minutes! 🕑

• [x] 🕑 Simple Setup — Up & Running In Minutes
• [x] ✂️ Highly Customizable to suite your needs
• [x] ☢️ Easy To Use Reactive API
• [x] 🟦 Typescript Support — IntelliSense
• [x] 💽 Use it with your favorite framework
  • 💙 React ❤️ Angular 💚 Vue 🫀 Svelte

Install

npm install @filterbox/v1 --save 

How to use

import { Filterbox } from "@filterbox/v1";

// create a new filterbox
const filterbox = new Filterbox([
    // category filter config.
    {
        // unique filter key
        key: 'category', 

        // category control config.
        control: {
            // typeof control - can be anything
            type: 'select',
            // arbitrary data required by control
            data: { 
                label: 'select category',
                options: [
                    { label: 'Animal', value: 'Animal' },
                    { label: 'Fruit', value: 'Fruit' },
                    { label: 'Drink', value: 'Drink' },
                ],
            },
        },

        // match function
        match(item: Product, ctx) {
            // get current selected category value
            const selectedProduct = ctx.getFilterValue('category');
            // match item if user hasn't selected a category
            if (selectedProduct.isNotSet()) return true;
            // checks if item's category equals selected category
            return item.category === selectedProduct.toString();
        },
    },

    // another control config. to filter by maximum price
    {
        key: 'max_price',
        control: {
            type: 'number',
            data: {
                label: 'max price',
            },
        },
        match: (item: Product, ctx) => {
            const maxPrice = ctx.getFilterValue('max_price');
            if (maxPrice.isNotSet()) return true;
            return item.price <= maxPrice.toNumber();
        },
    },
]);

// create a match result
const result = filterbox.match(
    [/** ... a list of products to match against */]
);

// subscribe to changes
result.subscribe((result) => {
    // everytime a filter changes the code below will be executed.
    console.log(`filtered list of products`, result); // logs filtered products
});

API

// subscribe to filters changes
filterbox.filters.subscribe(/** fn **/)
// get current value
filterbox.filters.value()
// set filters from query string
filterbox.filters.setQueryString (/** q: string **/)

// subscribe to controls changes
filterbox.controls.subscribe(/** fn **/)
// get current value
filterbox.controls.value()

// subscribe to query changes
filterbox.query.subscribe(/** fn **/)
// get current value
filterbox.query.value()

// subscribe to query changes
filterbox.match(/** data **/).subscribe(/** fn **/)
// get current value
filterbox.match(/** data **/).value()

// reset filters value
filterbox.reset();

✏️ more examples can be found here: https://github.com:solomancode/filterbox-eamples.git

contact: 📬 [email protected]