npm package: @filterbox/v1
Description: Add filters to your next web project — In Minutes! 🕑
Latest version: 1.0.30

# 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

![](https://raw.githubusercontent.com/solomancode/filterbox-eamples/6f1e0347c080fcb3d283f7ca95c99d1590b05724/logo.svg)

## Install
```sh
npm install @filterbox/v1 --save 
```

## How to use

```ts
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
```ts
// 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:*
📬 <a href="mailto:solomancode@gmail.com">solomancode@gmail.com</a>