# PickerContent

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

## API

### Overview

`PickerContent` displays the content of a picker (list of selectable items). It is used inside [`PickerModal`](./?path=/story/base-components-picker--pickermodal) and [`PickerStandalone`](./?path=/story/base-components-picker--pickerstandalone). Configure it via the [`usePickerContent`](./?path=/story/base-components-picker-hooks--usepickercontent) hook.

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

---

### Description

#### Overview

Use `` to render a picker inside a ``.

Use a dynamic import to pass your custom picker content component to `usePickerModal.pickerContentComponent`.

#### API

A picker content component accepts props that are being passed by the parent ``.

We should do the following with those props:

- Forward them to `` and to [`usePickerContent`](./?path=/story/base-components-collections-picker-hooks--usepickercontent)
- If we have filters, we should build the filters schema using `props.modalState.filters` raw parameters (see ["With Filters" example](./?path=/story/base-components-collections-picker--pickermodal))
- We also must wrap with [``](./?path=/story/base-components-providers--wixpatternsprovider) because the parent doesn't do that as it's just a modal and not a collection component.

##### `usePickerContent`

This hook is a helper hook that helps us to create a picker state object, using the config we already provided to the parent modal `usePickerModal` hook.
It accepts everything [`useCollection`](./?path=/story/common-hooks--usecollection) accepts minus `fetchData`, `paginationMode` & `limit` which were already provided to the parent modal `usePickerModal` hook.

#### Example

```jsx
import {
  PickerContentComponentProps,
  PickerContent,
  usePickerContent,
} from '@wix/patterns';
import { WixPatternsBMProvider } from '@wix/patterns/bm';
import { EmptyState } from '@wix/design-system';

/**
 * @param {PickerContentComponentProps} props
 */
export default function ContactsPicker(props) {
  const state = usePickerContent({
    queryName: 'ContactsPicker',
    modalState: props.modalState,
    fetchErrorMessage: ({ err }) => err.message,
  });

  return (
    
       ({
          title: contact.name,
          subtitle: contact.email,
        })}
        renderEmptyState={() => (
          
        )}
        // we must forward the props
        {...props}
      />
    
  );
}
```

Then use a dynamic import to pass it to `usePickerModal.pickerContentComponent` (see full example [here](./?activeTab=API&path=%2Fstory%2Fbase-components-collections-picker--pickermodal)):

```typescript jsx
import { usePickerModal } from '@wix/patterns/bm';
import { PickerModal } from '@wix/patterns';

export function PickerModalExample() {
  const state = usePickerModal({
    pickerContentComponent: () => import('./ContactsPicker'),
    // ...
  });
  return (
    
  );
}
```


### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `state` | `UsePickerContentParams<T, F> \| PickerContentState<T, F>` | Yes | - | A state object created with [`usePickerContent`](./?path=/story/base-components-collections-picker-hooks--usepickercontent) |
| `selectorListProps` | `Partial<SelectorListContentProps>` | No | - | Additional props to pass to [SelectorList](https://www.docs.wixdesignsystem.com/?path=/story/components-lists--selectorlist), i.e `imageSize`, `imageShape` etc. |
| `customContentButtonOnClick` | `((param: { onClose: (newItems?: T[]) => void; }) => void)` | No | - | A callback to be called when the custom content button is clicked |
| `showSelectAllCheckbox` | `boolean` | No | - | Shows "Select All" checkbox as a side action (overrides "customContent" prop). If `multiple={number}` or `multiple={false}` are used, this prop does nothing. |
| `filterComponent` | `ReactElement<any, string \| JSXElementConstructor<any>>` | No | - | Shows a SingleSelectFilter component in a picker modal to filter items; |
| `renderItem` | `(item: T, index: number) => Partial<PickerListItemProps>` | Yes | - | A function that render a item row in the selector list |
| `renderEmptyState` | `((params: { hasAvailableItems: boolean; query: ComputedQuery<F>; }) => ReactElement<any, any> \| null)` | No | - | A render function to be rendered when there're no items to show in the table.<br> You can use the built in [`<CollectionEmptyState />`](./?path=/story/features-display-empty-states--collectionemptystate).<br> The function accepts the following parameters * `hasAvailableItems`: Indicates whether other items might have been shown using other filtering / search * `query`: An instance of [ComputedQuery](./?path=/story/common-types--computedquery) that represents the query that resulted with an empty state |
| `enablePrimaryButton` | `boolean` | No | - | When set to `true`, the modal primary button will be always enabled. |
| `search` | `boolean \| CollectionSearchElement` | No | `true` | Displays a search input in the picker modal. Accepts a boolean or a custom CollectionSearch element as a parameter. When passing `false`, no search input is displayed. |
| `hideSearch` | `boolean` | No | - | @deprecated Use search={false} instead Hides the search input of the picker |
| `customMaxSelectionLabel` | `((_: { num: number; max: number; }) => string)` | No | - | Function that returns label for multi selection like: '2 items selected (24 max)` This function accepts argument {num: number, max: number} |
| `renderCustomNotification` | `((data: { selected?: number; total?: number; }) => ReactElement<FloatingNotificationProps, typeof FloatingNotification>) \| undefined` | No | - | Function that returns custom notification that will be displayed in the picker modal. Useful to describe additional information about the selection (for instance how to increase limit of selected items). @param data.selected - number of selected items @param data.total - total number of items |
| `showSelectedCount` | `boolean` | No | - | Displays count of selected items in <CustomModalLayout /> `sideActions` |
| `title` | `ReactNode` | No | - | Sets text title for the modal; can be used in conjunction with other components |
| `subtitle` | `ReactNode` | No | - | Sets text subtitle for the modal; can be used in conjunction with other components |
| `content` | `ReactNode` | No | - | Contains all modal's content in its middle area. `<CustomModalLayout/>` children are passed as `content`, too. |
| `primaryButtonText` | `ReactNode` | No | - | Sets text label or other content (e.g., <Loader/>) for the primary button |
| `primaryButtonProps` | `Omit<ButtonProps, "internalDataHook">` | No | - | Passes on any `<Button/>` properties on the primary button |
| `primaryButtonOnClick` | `(() => void)` | No | - | Defines a call-back function after user clicks on the primary button |
| `primaryButtonTooltipProps` | `(TooltipCommonProps & { content: ReactNode; })` | No | - | Passes on any `<Tooltip/>` properties on the primary button tooltip |
| `secondaryButtonText` | `ReactNode` | No | - | Sets text label for the secondary button |
| `secondaryButtonProps` | `Omit<ButtonProps, "internalDataHook">` | No | - | Passes on any `<Button/>` properties on the secondary button |
| `secondaryButtonOnClick` | `(() => void)` | No | - | Defines a call-back function after user clicks on the secondary button |
| `actionsSize` | `"small" \| "tiny" \| "medium" \| "large"` | No | - | Sets the size of action buttons |
| `sideActions` | `ReactNode` | No | - | Contains a checkbox or other components at the start of the footer |
| `footnote` | `ReactNode` | No | - | Renders supplementary text or other components at the bottom of the modal |
| `footnoteSkin` | `"light" \| "neutral"` | No | - | Sets the look and feel of the footnote |
| `width` | `Width<string \| number>` | No | - | Fixes the width of component; if content area is wider than `width`, it scrolls horizontally |
| `maxWidth` | `MaxWidth<string \| number>` | No | - | Sets the maximum width of component; if content area is longer than maxWidth, it scrolls horizontally |
| `height` | `Height<string \| number>` | No | - | Fixes the height of component |
| `maxHeight` | `MaxHeight<string \| number>` | No | - | Sets the maximum height of component; if content area is longer than maxHeight, it scrolls vertically |
| `removeContentPadding` | `boolean` | No | - | Removes 30 px left and right padding from the content area |
| `showHeaderDivider` | `boolean \| "auto"` | No | - | Controls visibility of a header divider. When set to `auto`, it is shown only when scroll position is greater than 0. When set to `true`, it is always visible, and when set to `false`, it is always hidden. |
| `showFooterDivider` | `boolean \| "auto"` | No | - | Controls visibility of a footer divider. When set to `auto`, it is shown up until content is scrolled to the very bottom. When set to `true`, it is always visible, and when set to `false`, it is always hidden. |
| `overflowY` | `"visible" \| "hidden" \| "scroll" \| "auto" \| "overlay" \| "none" \| "clip" \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| "-moz-hidden-unscrollable"` | No | - | Determines what happens when content overflows component vertically. Value 'none' will be removed in next major, use "visible" value instead. |
| `style` | `CSSProperties` | No | - | Sets object of CSS styles |
| `theme` | `"standard" \| "premium" \| "destructive"` | No | - | @deprecated use skin prop instead |
| `className` | `string` | No | - | Specifies a CSS class name to be appended to the component’s root element. |
| `dataHook` | `string` | No | - | Applies a data-hook HTML attribute to be used in the tests. |
| `closeButtonProps` | `ModalCloseButtonProps` | No | - | Close button props. |
| `helpButtonProps` | `ModalControlButtonProps` | No | - | Help button props. |
| `onCloseButtonClick` | `MouseEventHandler<HTMLButtonElement>` | No | - | @deprecated use `closeButtonProps` instead. |
| `onHelpButtonClick` | `MouseEventHandler<HTMLButtonElement>` | No | - | @deprecated use `helpButtonProps` instead. |
| `skin` | `"standard" \| "premium" \| "destructive"` | No | - | a global skin for the modal, will be applied as stylable state and will affect footer buttons skin. |
| `autoAdditionalStepOnInitialSelect` | `boolean` | No | - | When true, the picker will start directly on the additional step, skipping the first selection step. The back button will also be hidden. |
| `additionalStepTitle` | `string` | No | - | The additional step title |
| `additionalStepSubtitle` | `string` | No | - | The additional step subtitle |
| `renderAdditionalStepContent` | `((props: { item: T; }) => Element)` | No | - | Defines a function that returns a component to render in the additional step content area, if `hasAdditionalStep` returns `false` this prop is ignored. |
| `hasAdditionalStep` | `((props: { item: T; }) => boolean)` | No | - | Indicates if selected item has additional step or not |
| `onBeforeSelectAdditionalStep` | `(() => Promise<unknown>)` | No | - | Defines a callback function just before primaryButtonOnClick callback, returned value will be added as `additionalStepData` in onSelect payload |
| `continueButtonOnClick` | `((props: { item: T; }) => void)` | No | - | Defines a callback function after user clicks on the continue button to additional step content |
| `backButtonOnClick` | `((props: { item: T; }) => void)` | No | - | Defines a callback function after user clicks on the back button in the additional step content |
| `additionalStepOverrides` | `{ extraNode?: ReactNode; extraText?: string; subtitle?: string; image?: ReactNode; enablePrimaryButton?: boolean \| undefined; } \| undefined` | No | - | Additional steps modal content overrides |