Progressive "show more" list component. Displays an initial batch of items with a button to load more. Also exports `useInfinityList` hook for custom implementations.
Scanned 5/27/2026
Install via CLI
openskills install reaviz/skills# InfinityList
Progressive "show more" list component. Displays an initial batch of items with a button to load more. Also exports `useInfinityList` hook for custom implementations.
## Import
```tsx
import { InfinityList } from 'reablocks';
// or hook only
import { useInfinityList } from 'reablocks';
```
## InfinityList Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `ReactNode` | — | Items to display |
| `size` | `number` | `10` | Number of items per page |
| `threshold` | `number` | `3` | Fuzzy threshold — if total items are within `size + threshold`, show all |
| `nextSize` | `number` | — | Items to show on next click (defaults to `size`, use `Infinity` to show all) |
| `buttonClassName` | `string` | — | CSS class for the "Show more" button |
## Basic Usage
```tsx
<InfinityList>
{items.map(item => (
<div key={item.id}>{item.name}</div>
))}
</InfinityList>
```
## useInfinityList Hook
For custom rendering and control:
```tsx
import { useInfinityList } from 'reablocks';
function MyList({ items }) {
const { data, hasMore, remaining, showNext } = useInfinityList({
items,
size: 10,
threshold: 3
});
return (
<div>
{data.map(item => <div key={item.id}>{item.name}</div>)}
{hasMore && (
<button onClick={() => showNext()}>
Show {Math.min(10, remaining)} more
</button>
)}
</div>
);
}
```
## Hook API
### Inputs
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `items` | `any[]` | — | Array of items |
| `size` | `number` | `10` | Page size |
| `threshold` | `number` | `3` | Fuzzy threshold for showing all remaining |
| `nextSize` | `number` | — | Override next page size (`Infinity` to show all) |
### Returns
| Property | Type | Description |
|----------|------|-------------|
| `data` | `any[]` | Currently visible items |
| `hasMore` | `boolean` | Whether more items exist |
| `remaining` | `number` | Count of remaining items |
| `showNext` | `(amount?: number) => void` | Load next batch |
No comments yet. Be the first to comment!
End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches.
Orchestrate multi-phase deep research with web search, memory retrieval, pattern matching, and synthesis into structured findings
Persistent memory systems for LLM conversations including short-term, long-term, and entity-based memory Use when: conversation memory, remember, memory persistence, long-term memory, chat history.
CodeTour `.tour`ファイルを作成 — ペルソナターゲット、ステップバイステップウォークスルー(実際のファイルとラインアンカー付き)。オンボーディングツアー、アーキテクチャウォークスルー、PRツアー、RCAツアー、構造化「これがどのように機能するかを説明」リクエストに使用。
KMPプロジェクト向けのCompose MultiplatformおよびJetpack Composeパターン — 状態管理、ナビゲーション、テーマ設定、パフォーマンス、プラットフォーム固有のUI。