# useItemsSelectionFilter

**Category:** Common/hooks

## Design

### Description

The `useItemsSelectionFilter` hook creates a filter that fetches and displays items from a specific provider.

For more information, see [Items Selection](https://bo.wix.com/pages/items-selection/).


```tsx
import { useItemsSelectionFilter } from '@wix/patterns';
```

### Basic filter with Items Selection

Call `useItemsSelectionFilter` with a `providerKey` and a filter object. The hook returns a `collection` and `renderItem` that you pass to a filter component, such as `MultiSelectCheckboxFilter`.

```tsx
import React from 'react';
import {
  idNameArrayFilter,
  ItemsSelectionValue,
  MultiSelectCheckboxFilter,
  useItemsSelectionFilter,
} from '@wix/patterns';

function ItemsSelectionFilterExample() {
  const [filter] = React.useState(() =>
    idNameArrayFilter<ItemsSelectionValue>(),
  );

  const { collection, renderItem } = useItemsSelectionFilter({
    providerKey: 'your-provider-key',
    filter,
  });

  return (
    <MultiSelectCheckboxFilter
      filter={filter}
      collection={collection}
      renderItem={renderItem}
    />
  );
}
```

## API

### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `providerKey` | `string` | Yes | - | The provider key to use for fetching items. |
| `filter` | `Filter<ItemsSelectionValue[]>` | Yes | - | This is a reference to the filter that was defined in the main collection. For example: `collection.filters.<filterName>`. |
| `queryFilters` | `Record<string, any> \| null` | No | - | Additional filters to apply to the query. |