# usePickerContent

**Category:** Base Components/Collections/Picker/Hooks

## API

### Description

`usePickerContent` is a React hook that creates the collection state for the content displayed inside a [`PickerModal`](./?path=/story/base-components-picker--pickermodal). It extends the collection config (like `filters`, `itemName`) and adds picker-specific options such as `modalState`, `events`, and `initialSelect`.

Define a `PickerContentComponent` that calls `usePickerContent` with the `modalState` received via props, then pass it to `usePickerModal` as `pickerContentComponent`.

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

---

### Example

```tsx
import { usePickerContent, PickerContent } from '@wix/patterns';

const MyPickerContent = ({ modalState }) => {
  const contentState = usePickerContent({
    modalState,
    filters: { status: stringFilter() },
    fetchData: (query) => fetchItems(query),
    itemKey: (item) => item.id,
    itemName: (item) => item.name,
  });

  return (
     item.name },
      ]}
    />
  );
};
```

### Returns

The same config object, enriched with internal collection state. Pass it to ``.

### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `disableAutoSelectAllCount` | `boolean` | No | - | Whether to disable "Select All" server simulation for bulk selection. |
| `useNewSelectAllLogic` | `boolean` | No | - | Whether to enable new "Select All" logic. <br> <br> If `true`: <br> - Unchecking items after checking "Select All" does not fallback to specific selection logic and values. This means in `<bulkActionToolbar />` and `<MultiBulkActionToolbar />`, "Total Selected" will show `total - unchecked items` and `isSelectAll` will be true. <br> - You will receive a list of unchecked IDs. |
| `queryName` | `string` | Yes | - | Unique value for each API endpoint consumed in `fetchData`. |
| `fqdn` | `string` | No | - | Entity fqdn. |
| `toExtendedFields` | `((item: T) => ExtendedFields \| null)` | No | - | The `ExtendedFields` object used to render custom field values Optional in case your data complies to the type `{ extendedFields: ExtendedFields }` |
| `fetchErrorMessage` | `((params: { err: unknown; isOnline: boolean; }) => string \| null)` | No | - | Message shown in a toast when fetching from the server fails. <br> <br> If the function returns a nullish value, no toast is shown. @deprecated Instead of using `fetchErrorMessage`, use `errorState` prop in the component, which will show the error message in the card. |
| `persistQueryToUrl` | `boolean` | No | `false` | Persist the selected filters, search & sort in the query parameters of the URL.<br/> For improved readability, sort & columns are formatted in CSV-like formatting, i.e "?sort=name+desc,price+asc". Do not use commas and/or spaces for your columns IDs.<br> Note: The filters from the selected view will be persist, but the actual view will not be selected |
| `refreshOnColumnsChange` | `boolean` | No | `false` | Whether the collection refreshes when different columns are selected. <br> <br> Selected columns are passed in `fetchData(query.columns)`. |
| `selectionConsistencyMode` | `"clear" \| "preserve"` | No | `preserve` | Preserve or clear selection after applying a new search or filter. |
| `events` | `(CollectionEvents<F> & PickerEvents<T, F>)` | No | - | Optional callbacks for various events of the collection state lifecycle - `onInitialPageFetched` - when the first page of items is ready - `onSearch` - when fetching new items as a result new search - `onSearchResults` - when the result of a search is ready - `onNewPageStart` - when starting to load the next page of items - `onNewPageAdded` - when the result of the next page is ready - `onError` - When `fetchData` throws an error. Return `true` from this function if the error was reported and shouldn't be reported again internally. Optional callbacks for various events of the picker content lifecycle Extends [CollectionEvents](./?path=/story/common-hooks--usecollection) `onReady` - when picker content is ready `onInitialFetchError` - when there's an error loading the picker. When the callback returns a promise, the initial loader will keep showing until the promise is resolved (useful for cases of redirect to login for example). `onItemSelectClick` - when clicking on an item checkbox / radio button |
| `modalState` | `PickerModalState<T, F>` | Yes | - | The modal state object passed from `<PickerModal />` |
| `initialSelect` | `true \| ((item: T, index: number) => boolean) \| PickerSelection<T>` | No | - | Sets initial selection to the picker. Either:<br> - `boolean` - Sets the first item as selected. - `function` - A predicate for items to be selected in the picker. - `object` (Older API, new API below) - `selectedValues` - Specific selection - `isSelectAll` - All selected - `uncheckedValues` - Optional unchecked items - `partiallySelectedIds` - Items that should have 3rd indeterminate status - `object` (New API) - `values` - Initial selected values. Using this prop it's possible to specify the initial status of each pre-selected value. - `defaultStatus` - Forces this status on all items and all future items that will be loaded to the picker when scrolling. |