Skip to content

Commit 50d81e9

Browse files
authored
docs(select): document renderFilteredItems() helper (#7741)
1 parent 23b00bf commit 50d81e9

File tree

1 file changed

+55
-0
lines changed

1 file changed

+55
-0
lines changed

packages/select/src/components/select/select-component.md

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -398,4 +398,59 @@ const FilmSelect: React.FC = () => (
398398
);
399399
```
400400

401+
@### Using renderFilteredItems()
402+
403+
This package also exports a `renderFilteredItems()` helper function for custom item list rendering. It handles the
404+
`noResults` and `initialContent` states automatically.
405+
406+
<div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
407+
408+
`renderFilteredItems()` calls `renderItem()` for each filtered item, so you don't need to map through
409+
`filteredItems` yourself.
410+
411+
</div>
412+
413+
```tsx
414+
import { ItemListRenderer, renderFilteredItems } from "@blueprintjs/select";
415+
416+
const renderMenu: ItemListRenderer<Film> = (listProps) => {
417+
return (
418+
<Menu role="listbox" ulRef={listProps.itemsParentRef} {...listProps.menuProps}>
419+
{renderFilteredItems(
420+
listProps,
421+
// shown when no items match the query
422+
<MenuItem disabled={true} text="No results." roleStructure="listoption" />,
423+
// shown when query is empty
424+
<MenuItem disabled={true} text="Start typing to search..." roleStructure="listoption" />
425+
)}
426+
</Menu>
427+
);
428+
};
429+
430+
const FilmSelect: React.FC = () => (
431+
<Select<Film>
432+
itemListRenderer={renderMenu}
433+
itemPredicate={filterFilm}
434+
itemRenderer={renderFilm}
435+
items={...}
436+
onItemSelect={...}
437+
/>
438+
);
439+
```
440+
441+
The function signature is:
442+
443+
```ts
444+
function renderFilteredItems(
445+
props: ItemListRendererProps<T>,
446+
noResults?: React.ReactNode,
447+
initialContent?: React.ReactNode | null,
448+
): React.ReactNode;
449+
```
450+
451+
- `props`: the props object passed to your `itemListRenderer` callback.
452+
- `noResults`: (optional) content to render when `filteredItems` is empty.
453+
- `initialContent`: (optional) content to render when `query` is empty. Pass `null` to render nothing;
454+
pass `undefined` (or omit) to render items normally.
455+
401456
@interface ItemListRendererProps

0 commit comments

Comments
 (0)