Skip to content

Commit a3102a6

Browse files
iamdarshshahiamdarshshah
committed
docs: fill empty defaults with dash, expand all prop descriptions
1 parent d932809 commit a3102a6

1 file changed

Lines changed: 29 additions & 29 deletions

File tree

‎README.md‎

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -340,38 +340,38 @@ function PostList() {
340340

341341
## Props, `InfiniteScroll`
342342

343-
| Prop | Type | Required | Default | Description |
344-
| ---------------------------- | ------------------------------- | -------- | ------- | -------------------------------------------------------------------------------- |
345-
| `dataLength` | `number` | yes | | Length of the full rendered list. Resets the load guard when it changes. |
346-
| `next` | `() => void` | yes | | Append the next page to your list state. Called at most once per load. |
347-
| `hasMore` | `boolean` | yes | | When false, stops the observer and shows `endMessage`. |
348-
| `loader` | `ReactNode` | yes | | Shown while the next page is loading. |
349-
| `endMessage` | `ReactNode` | no | | Shown when `hasMore` is false. |
350-
| `height` | `number \| string` | no | | Fixed height for the scroll container. Omit for window scroll. |
351-
| `scrollableTarget` | `HTMLElement \| string \| null` | no | | Scrollable parent element or its DOM id. |
352-
| `scrollThreshold` | `number \| string` | no | `0.8` | Trigger distance: fraction `0.8` = 80% scrolled, or pixel string `"200px"`. |
353-
| `inverse` | `boolean` | no | `false` | Reverse scroll direction. Use with `flexDirection: column-reverse` for chat UIs. |
354-
| `pullDownToRefresh` | `boolean` | no | `false` | Enable pull-to-refresh. Requires `refreshFunction`. |
355-
| `refreshFunction` | `() => void` | no | | Called when pull threshold is breached. |
356-
| `pullDownToRefreshThreshold` | `number` | no | `100` | Pixels to pull before `refreshFunction` fires. |
357-
| `pullDownToRefreshContent` | `ReactNode` | no | | Shown while pulling. |
358-
| `releaseToRefreshContent` | `ReactNode` | no | | Shown when threshold is breached. |
359-
| `onScroll` | `(e: UIEvent) => void` | no | | Scroll event listener on the container. |
360-
| `className` | `string` | no | `''` | CSS class on the inner scroll container. |
361-
| `style` | `CSSProperties` | no | | Inline styles on the inner scroll container. |
362-
| `hasChildren` | `boolean` | no | | Set when `children` is not a plain array (single node, fragment). |
363-
| `initialScrollY` | `number` | no | | Restore scroll Y position on mount. |
343+
| Prop | Type | Required | Default | Description |
344+
| ---------------------------- | ------------------------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
345+
| `dataLength` | `number` | yes | - | Current count of rendered items. The component resets its load guard each time this value changes, which allows `next()` to fire again on the next scroll. |
346+
| `next` | `() => void` | yes | - | Called once when the sentinel enters the viewport. Append new items to your list state inside this callback; do not replace the existing items. |
347+
| `hasMore` | `boolean` | yes | - | When `false`, the observer is disconnected and `next()` will not be called again. Set it to `false` when your data source has no more pages. |
348+
| `loader` | `ReactNode` | yes | - | Rendered below the list while the next page is loading. Displayed between the last item and the bottom sentinel. |
349+
| `endMessage` | `ReactNode` | no | - | Rendered below the list when `hasMore` is `false`. Use it for an "all caught up" or "no more items" message. |
350+
| `height` | `number \| string` | no | - | Creates a fixed-height scroll container wrapping the list. Accepts a pixel number or any CSS length string. Omit this prop to scroll the window instead. |
351+
| `scrollableTarget` | `HTMLElement \| string \| null` | no | - | The scrollable ancestor that already provides overflow scrollbars. Pass the element's `id` string or a direct `HTMLElement` reference. Required when the scroll container is neither the window nor the `height` wrapper. |
352+
| `scrollThreshold` | `number \| string` | no | `0.8` | How close to the bottom the user must scroll before `next()` is called. A fraction like `0.8` means 80% scrolled; a string like `"200px"` means within 200 px of the bottom edge. |
353+
| `inverse` | `boolean` | no | `false` | Reverse scroll direction for chat or messaging UIs. The sentinel moves to the top of the list. Use together with `flexDirection: column-reverse` on the scroll container. |
354+
| `pullDownToRefresh` | `boolean` | no | `false` | Enable pull-to-refresh gesture on touch and mouse. Requires `refreshFunction` to also be set. |
355+
| `refreshFunction` | `() => void` | no | - | Called once when the user pulls down past `pullDownToRefreshThreshold` pixels and releases. Only active when `pullDownToRefresh` is `true`. |
356+
| `pullDownToRefreshThreshold` | `number` | no | `100` | How many pixels the user must pull down before `refreshFunction` is triggered on release. |
357+
| `pullDownToRefreshContent` | `ReactNode` | no | - | Content shown inside the pull-to-refresh area while the user is pulling but has not yet reached the threshold. |
358+
| `releaseToRefreshContent` | `ReactNode` | no | - | Content shown inside the pull-to-refresh area once the threshold is passed and the user can release to trigger a refresh. |
359+
| `onScroll` | `(e: UIEvent) => void` | no | - | Callback fired on every scroll event on the container. Receives the native `UIEvent`. Useful for syncing UI state with scroll position. |
360+
| `className` | `string` | no | `''` | CSS class name applied to the inner scroll container div. |
361+
| `style` | `CSSProperties` | no | - | Inline style object applied to the inner scroll container div. Merged with the component's default layout styles. |
362+
| `hasChildren` | `boolean` | no | - | Set to `true` when `children` is a single element or a fragment rather than an array. Helps the component detect whether visible content exists to determine scroll state. |
363+
| `initialScrollY` | `number` | no | - | Scrolls the window to this Y offset on mount. Useful for restoring a user's scroll position when navigating back to a page. |
364364

365365
## Props, `useInfiniteScroll`
366366

367-
| Prop | Type | Required | Default | Description |
368-
| ------------------ | ------------------------------- | -------- | ------- | --------------------------------------- |
369-
| `dataLength` | `number` | yes | | Length of the full rendered list. |
370-
| `next` | `() => void` | yes | | Called when sentinel enters viewport. |
371-
| `hasMore` | `boolean` | yes | | When false, disconnects the observer. |
372-
| `scrollThreshold` | `number \| string` | no | `0.8` | Trigger distance. |
373-
| `scrollableTarget` | `HTMLElement \| string \| null` | no | | Observer root element. |
374-
| `inverse` | `boolean` | no | `false` | Observe from the top instead of bottom. |
367+
| Prop | Type | Required | Default | Description |
368+
| ------------------ | ------------------------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
369+
| `dataLength` | `number` | yes | - | Current count of rendered items. The hook resets its load guard whenever this value changes, allowing `next()` to fire again on the next intersection. |
370+
| `next` | `() => void` | yes | - | Called once when the sentinel enters the viewport. Append new items to your list state inside this callback; do not replace the existing items. |
371+
| `hasMore` | `boolean` | yes | - | When `false`, the `IntersectionObserver` is disconnected and `next()` will not be called again. Set it to `false` when your data source has no more pages. |
372+
| `scrollThreshold` | `number \| string` | no | `0.8` | How close to the edge the sentinel must be before `next()` fires. A fraction like `0.8` means 80% scrolled; a string like `"200px"` means within 200 px of the edge. |
373+
| `scrollableTarget` | `HTMLElement \| string \| null` | no | - | The scrollable ancestor to use as the observer root. Pass a DOM `id` string or an `HTMLElement` reference. When omitted, the observer uses the browser viewport. |
374+
| `inverse` | `boolean` | no | `false` | When `true`, the rootMargin is applied to the top edge instead of the bottom. Place the sentinel at the top of your list and use `flexDirection: column-reverse` for chat UIs. |
375375

376376
Returns `{ sentinelRef, isLoading }`.
377377

0 commit comments

Comments
 (0)