Skip to content

Commit 6a8cc53

Browse files
feat(fit-list): add overflowPlacement prop
1 parent 99b8f3c commit 6a8cc53

7 files changed

Lines changed: 293 additions & 175 deletions

File tree

README.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,7 @@ import { FitList } from 'react-fit-list'
113113
| `emptyFallback` | `React.ReactNode` | `null` | Rendered when `items` is empty. |
114114
| `gap` | `number` | `8` | Pixel gap between items. |
115115
| `collapseFrom` | `'end' \| 'start'` | `'end'` | Collapse from the end or start of the list. |
116+
| `overflowPlacement` | `'end' \| 'closest'` | `'end'` | Keep the overflow pinned to the row end or place it next to the hidden segment. |
116117
| `reserveOverflowSpace` | `boolean` | `false` | Reserve room for the overflow element even when everything currently fits. |
117118
| `overflowWidth` | `number` | auto | Fixed overflow width in pixels. Useful when the trigger width is known. |
118119
| `estimatedItemWidth` | `number \| ((item, index) => number)` | fallback `96` | Used in `estimate` mode or before live measurements are available. |
@@ -194,6 +195,22 @@ Useful when the most recent or most important items are at the end.
194195
/>
195196
```
196197

198+
### Overflow placement
199+
200+
By default, the overflow affordance stays pinned to the far end of the row.
201+
Set `overflowPlacement="closest"` to make it hug the hidden segment instead.
202+
This is especially useful with `collapseFrom="start"`.
203+
204+
```tsx
205+
<FitList
206+
items={items}
207+
getKey={(item) => item.id}
208+
renderItem={(item) => <Tag>{item.label}</Tag>}
209+
collapseFrom="start"
210+
overflowPlacement="closest"
211+
/>
212+
```
213+
197214
### Estimate mode
198215

199216
Estimate mode avoids relying on live measurement for every item and can be useful when item widths are predictable.

example/pnpm-lock.yaml

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)