# salla-filters (https://docs.salla.dev/twilight/react/web-components/salla-filters)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

Renders the product filter panel (one `salla-filters-widget` per filter option) on listing pages.
Use it once on a product listing page, as the container for the filter widgets. It keeps the selected
filters in the page URL as `filters[...]` query parameters and tells the rest of the page when they change.
Filters normally arrive from the `filters::fetched` event, so you rarely set `filters` by hand.
The element hides itself (`display: none`) when the `filters::hidden` event fires.

## Use it [#use-it]

In HTML or JSX, use the tag `<salla-filters>` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase).

```tsx
import { SallaFilters } from '@salla.sa/twilight-components-react/filters';
```

**Client-only.** On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.

## Example [#example]

```tsx
import { useEffect } from 'react';
import { SallaFilters } from '@salla.sa/twilight-components-react/filters';

export function Example() {
  useEffect(() => {
    document.querySelector('salla-filters').addEventListener('changed', (e) => {
      console.log('selected filters', e.detail);
    });
  }, []);

  return (
    <SallaFilters />
  );
}
```

```html
<salla-filters></salla-filters>
<script>
  document.querySelector('salla-filters').addEventListener('changed', (e) => {
    console.log('selected filters', e.detail);
  });
</script>
```

## Properties [#properties]

| Property  | Attribute | Description                                                                                                                                                                                                                                                                                                       | Type       | Default |
| --------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ------- |
| `filters` | `filters` | The filter options to render, as an array of objects with this shape: `{ key, label, type, values?, min?, max? }`. `type` is one of `"values"`, `"variants"`, `"minimum"` or `"range"`. Each `values` item is `{ key?, value?, count?, from?, to? }`. It is replaced whenever the `filters::fetched` event fires. | `Filter[]` |         |

## Events [#events]

Listen with `addEventListener`, or the `on` prop of the React wrapper (for example `onModalBack`).

| Event     | Description                                                                                                                                                                                                                                                                                               | Detail |
| --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ |
| `changed` | Fired after the selected filters change and the URL has been updated (about 300ms after the change). `event.detail` is the selected-filters object, for example `{ brand_id: [1, 2], price: ... }`; variant selections are nested under a `variants` key. It is an empty object when nothing is selected. | `any`  |

## Methods [#methods]

Call these on the element or a React ref.

### `applyFilters() => Promise<void>` [#applyfilters--promisevoid]

Writes the selected filters to the page URL as `filters[...]` query parameters (using `history.pushState`),
then emits the global `salla-filters::changed` event and the component's `changed` event. The work runs after a 300ms delay.
Does nothing until the component has finished loading.

### `getFilters() => Promise<any>` [#getfilters--promiseany]

Returns the currently selected filters.

Returns `Promise<any>`: Promise resolving to the selected-filters object, keyed by filter key (empty object when nothing is selected).

### `removeFilter(chip: any) => Promise<void>` [#removefilterchip-any--promisevoid]

Removes a single applied filter and applies the result. Used by `salla-applied-filters` to remove one chip.

| Parameter | Type  | Description                                                                                                                                                                                                                                         |
| --------- | ----- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `chip`    | `any` | The applied filter to remove: `{ key, value, type }`; for variant filters (`type: "variants"`) pass `variantKey` instead of `key`. For range filters the whole `key` entry is removed; otherwise only `value` is removed from that key's selection. |

### `resetFilters() => Promise<void>` [#resetfilters--promisevoid]

Clears all selected filters and removes the `filters[...]` query parameters from the URL.
Also emits the global `salla-filters::reset` event and then applies the (now empty) filters.

## Related [#related]

Renders: [`<salla-filters-widget>`](https://docs.salla.dev/twilight/react/web-components/salla-filters-widget).