### Install react-infinite-scroll-component

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/README.md

Install the library using npm, yarn, or pnpm. No specific setup is required beyond installation.

```bash
npm install react-infinite-scroll-component
# or
yarn add react-infinite-scroll-component
# or
pnpm add react-infinite-scroll-component
```

--------------------------------

### Install react-infinite-scroll-component with yarn

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/AGENTS.md

Use this command to install the library using yarn.

```bash
yarn add react-infinite-scroll-component
```

--------------------------------

### Install react-infinite-scroll-component

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/llms.txt

Install the library using npm. This command adds the package to your project's dependencies.

```bash
npm install react-infinite-scroll-component
```

--------------------------------

### Example: Chat UI with Custom Scrollable Parent

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/_autodocs/scroll-modes.md

A complete example of a chat window using InfiniteScroll with a custom scrollable parent. This setup allows for bottom-anchored chat messages and efficient loading of older messages.

```typescript
function ChatWindow() {
  const [messages, setMessages] = useState(initialMessages);
  const [hasMore, setHasMore] = useState(true);
  const chatRef = useRef<HTMLDivElement>(null);

  const loadOlderMessages = async () => {
    const older = await fetchMessages({ before: messages[0].timestamp });
    if (older.length === 0) {
      setHasMore(false);
      return;
    }
    setMessages(prev => [...older, ...prev]);
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
      <header>Chat</header>
      
      <div
        ref={chatRef}
        style={{
          flex: 1,
          overflow: 'auto',
          display: 'flex',
          flexDirection: 'column-reverse', // Bottom-anchor chat
        }}
      >
        <InfiniteScroll
          dataLength={messages.length}
          next={loadOlderMessages}
          hasMore={hasMore}
          loader={<p>Loading older messages...</p>}
          scrollableTarget={chatRef.current}
          inverse={true}
          style={{ display: 'flex', flexDirection: 'column-reverse' }}
        >
          {messages.map(msg => (
            <div key={msg.id} style={{ padding: 8 }}>
              <strong>{msg.author}</strong>: {msg.text}
            </div>
          ))}
        </InfiniteScroll>
      </div>
      
      <footer>Message input...</footer>
    </div>
  );
}
```

--------------------------------

### Accessibility Example 1: Role and Label

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/README.md

This example demonstrates how to use the `role` and `aria-label` props to improve accessibility for screen readers, announcing the container and item count.

```APIDOC
## Accessibility

Pass `role` and a label so screen readers can announce the container and its item count correctly:

```tsx
<InfiniteScroll
  role="list"
  aria-label="Search results"
  dataLength={items.length}
  next={fetchMore}
  hasMore={hasMore}
  loader={<p>Loading...</p>}
>
  {items.map((item) => (
    <div role="listitem" key={item.id}>
      {item.name}
    </div>
  ))}
</InfiniteScroll>
```
```

--------------------------------

### Accessibility Example 2: Aria-labelledby

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/README.md

This example shows how to reference an existing heading using the `aria-labelledby` prop for screen reader announcements.

```APIDOC
Or reference an existing heading via `aria-labelledby`:

```tsx
<h2 id="results-heading">Search results</h2>
<InfiniteScroll
  role="list"
  aria-labelledby="results-heading"
  dataLength={items.length}
  next={fetchMore}
  hasMore={hasMore}
  loader={<p>Loading...</p>}
>
```
```

--------------------------------

### TanStack Query Integration Example

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/llms.txt

An example demonstrating how to integrate the react-infinite-scroll-component with TanStack Query for managing infinite scroll data fetching.

```APIDOC
## With TanStack Query

```tsx
import { useInfiniteQuery } from '@tanstack/react-query';
import InfiniteScroll from 'react-infinite-scroll-component';

function Feed() {
  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteQuery({
    queryKey: ['items'],
    queryFn: ({ pageParam = 0 }) => fetchItems(pageParam),
    getNextPageParam: (last, pages) => last.length === 20 ? pages.length : undefined,
  });
  const items = data?.pages.flat() ?? [];
  return (
    <InfiniteScroll
      dataLength={items.length}
      next={fetchNextPage}
      hasMore={!!hasNextPage}
      loader={isFetchingNextPage ? <p>Loading...</p> : null}
    >
      {items.map(item => <div key={item.id}>{item.title}</div>)}
    </InfiniteScroll>
  );
}
```
```

--------------------------------

### CommonJS Import Example

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/_autodocs/module-exports.md

Demonstrates how to import the InfiniteScroll component and its hooks using the CommonJS `require` syntax, suitable for Node.js environments.

```javascript
const InfiniteScroll = require('react-infinite-scroll-component');
const { useInfiniteScroll } = require('react-infinite-scroll-component');

// Use exactly as in ESM
```

--------------------------------

### Basic Infinite Scroll Usage

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/_autodocs/use-infinite-scroll-hook.md

Demonstrates the fundamental setup for infinite scrolling. It fetches more items when the user scrolls to the end of the list.

```typescript
import { useState } from 'react';
import { useInfiniteScroll } from 'react-infinite-scroll-component';

function Feed() {
  const [items, setItems] = useState(initialItems);
  const [hasMore, setHasMore] = useState(true);

  const { sentinelRef, isLoading } = useInfiniteScroll({
    next: async () => {
      const more = await fetchItems(items.length);
      if (more.length === 0) {
        setHasMore(false);
        return;
      }
      setItems((prev) => [...prev, ...more]);
    },
    hasMore,
    dataLength: items.length,
  });

  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
      <li ref={sentinelRef} aria-hidden="true" />
      {isLoading && <li>Loading...</li>}
      {!hasMore && <li>All items loaded.</li>}
    </ul>
  );
}
```

--------------------------------

### RootMargin Calculation Example

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/_autodocs/performance-and-internals.md

Illustrates how the `buildRootMargin` function converts a user-defined `scrollThreshold` into a CSS `rootMargin` string for IntersectionObserver. This example shows the conversion process and the resulting root margin for a specific threshold and inverse setting.

```typescript
scrollThreshold: 0.8, inverse: false
↓
parseThreshold(0.8) → { unit: 'Percent', value: 80 }
↓
buildRootMargin(0.8, false)
  remaining = 100 - 80 = 20
  return "0px 0px 20% 0px"  // bottom margin
↓
IntersectionObserver rootMargin: "0px 0px 20% 0px"
  Sentinel fires when within 20% of the bottom
```

--------------------------------

### Basic Pull-to-Refresh Implementation

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/_autodocs/pull-to-refresh.md

Implement basic pull-to-refresh by enabling the `pullDownToRefresh` prop and providing a `refreshFunction`. This example shows how to fetch new data and update the list when the user pulls down.

```typescript
import { useState } from 'react';
import InfiniteScroll from 'react-infinite-scroll-component';

function Feed() {
  const [items, setItems] = useState(initialItems);
  const [hasMore, setHasMore] = useState(true);

  const refreshList = async () => {
    const fresh = await api.getLatest();
    setItems(fresh);
    // hasMore stays true because we reloaded the entire list
  };

  const fetchMore = async () => {
    const next = await api.getMore({ offset: items.length });
    if (next.length === 0) {
      setHasMore(false);
      return;
    }
    setItems(prev => [...prev, ...next]);
  };

  return (
    <InfiniteScroll
      dataLength={items.length}
      next={fetchMore}
      hasMore={hasMore}
      loader={<p>Loading...</p>}
      pullDownToRefresh
      refreshFunction={refreshList}
      pullDownToRefreshContent={
        <h3 style={{ textAlign: 'center' }}>↓ Pull down to refresh</h3>
      }
      releaseToRefreshContent={
        <h3 style={{ textAlign: 'center' }}>↑ Release to refresh</h3>
      }
    >
      {items.map(item => (
        <div key={item.id} style={{ padding: 12, borderBottom: '1px solid #eee' }}>
          {item.title}
        </div>
      ))}
    </InfiniteScroll>
  );
}
```

--------------------------------

### Basic Infinite Scroll with Window Scroll

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/_autodocs/infinite-scroll-component.md

Demonstrates a basic infinite scroll setup that utilizes the browser window for scrolling. It fetches more items when the user scrolls to the bottom.

```typescript
import { useState } from 'react';
import InfiniteScroll from 'react-infinite-scroll-component';

function Feed() {
  const [items, setItems] = useState(initialItems);
  const [hasMore, setHasMore] = useState(true);

  const fetchMore = async () => {
    const next = await api.getItems({ offset: items.length });
    if (next.length === 0) {
      setHasMore(false);
      return;
    }
    setItems((prev) => [...prev, ...next]);
  };

  return (
    <InfiniteScroll
      dataLength={items.length}
      next={fetchMore}
      hasMore={hasMore}
      loader={<p>Loading...</p>}
      endMessage={<p>All items loaded.</p>}
    >
      {items.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </InfiniteScroll>
  );
}
```

--------------------------------

### InfiniteScroll Component API

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/_autodocs/COMPLETION_SUMMARY.txt

Documentation for the main InfiniteScroll component, detailing its props, behavior, and usage examples.

```APIDOC
## InfiniteScroll Component

### Description
The `InfiniteScroll` component is the primary way to implement infinite scrolling functionality in your React application. It handles loading more items as the user scrolls down the page.

### Props

#### Props Interface (`Props`)
- **`children`** (ReactNode) - Required - The content to be rendered, typically a list of items.
- **`dataLength`** (number) - Required - The total number of data items currently rendered. Used to determine if more data needs to be loaded.
- **`next`** (function) - Required - A function to call when more data needs to be fetched. This function should update the `dataLength` and provide new items.
- **`hasMore`** (boolean) - Required - A flag indicating whether there are more items to load. If `false`, the `next` function will not be called.
- **`loader`** (ReactNode) - Optional - A component or element to display while new data is being loaded.
- **`endMessage`** (ReactNode) - Optional - A message to display when all items have been loaded and `hasMore` is `false`.
- **`pullDownToRefresh`** (boolean) - Optional - Enables pull-to-refresh functionality on mobile devices.
- **`pullDownToRefreshContent`** (ReactNode) - Optional - Custom content to display during the pull-to-refresh gesture.
- **`releaseToRefreshContent`** (ReactNode) - Optional - Custom content to display when the user releases to trigger a refresh.
- **`refreshFunction`** (function) - Optional - The function to call when a refresh is triggered by the pull-to-refresh gesture.
- **`height`** (number) - Optional - The height of the scrollable container in pixels. If not provided, it defaults to the window height.
- **`scrollThreshold`** (string | number) - Optional - Specifies how close to the end of the scrollable area the user must be to trigger loading more items. Can be a number (percentage) or a string (e.g., '100px').
- **`inverse`** (boolean) - Optional - If `true`, enables inverse scrolling, useful for chat-like interfaces where new items appear at the top.
- **`containerClassName`** (string) - Optional - CSS class name to apply to the scrollable container.
- **`style`** (object) - Optional - Inline styles to apply to the scrollable container.

### Behavior Documentation
- **Loader**: The `loader` prop is displayed when `next` is called and `hasMore` is `true`.
- **End Message**: The `endMessage` prop is displayed when `hasMore` becomes `false`.
- **Pull-to-refresh**: If enabled, users can pull down to trigger a refresh action defined by `refreshFunction`.
- **Inverse Scroll**: When `inverse` is true, new items are added to the top, and the scroll position is adjusted accordingly.

### DOM Structure and Lifecycle Effects
The component manages its own DOM structure to facilitate scrolling and loading. It utilizes IntersectionObserver internally for efficient scroll detection.

### Usage Examples
Refer to the `infinite-scroll-component.md` file for detailed usage examples covering various scenarios.
```

--------------------------------

### Complete Feed with All Features

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/_autodocs/quick-reference.md

A comprehensive example of a feed component that includes infinite scrolling, pull-to-refresh functionality, and standard loader/end messages. Ensure you have an `api` object with `getItems` and `getLatest` methods.

```typescript
function Feed() {
  const [items, setItems] = useState(initialItems);
  const [hasMore, setHasMore] = useState(true);

  const fetchMore = async () => {
    const next = await api.getItems({ offset: items.length });
    if (!next.length) return setHasMore(false);
    setItems(prev => [...prev, ...next]);
  };

  const refresh = async () => {
    const fresh = await api.getLatest();
    setItems(fresh);
  };

  return (
    <InfiniteScroll
      dataLength={items.length}
      next={fetchMore}
      hasMore={hasMore}
      loader={<p>Loading...</p>}
      endMessage={<p>All loaded</p>}
      pullDownToRefresh
      refreshFunction={refresh}
      pullDownToRefreshContent={<h3>↓ Pull</h3>}
      releaseToRefreshContent={<h3>↑ Release</h3>}
    >
      {items.map(item => <div key={item.id}>{item.name}</div>)}
    </InfiniteScroll>
  );
}
```

--------------------------------

### Window Scroll Mode Example: Social Feed

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/_autodocs/scroll-modes.md

Demonstrates a Twitter-like feed using window scroll mode. Ensure `hasMore` is managed correctly to prevent infinite loading.

```typescript
function TwitterLikeFeed() {
  const [tweets, setTweets] = useState(initialTweets);
  const [hasMore, setHasMore] = useState(true);

  const fetchMore = async () => {
    const newTweets = await fetchTweets({ offset: tweets.length });
    if (newTweets.length === 0) {
      setHasMore(false);
      return;
    }
    setTweets(prev => [...prev, ...newTweets]);
  };

  return (
    <>
      <header>Twitter Clone</header>
      <InfiniteScroll
        dataLength={tweets.length}
        next={fetchMore}
        hasMore={hasMore}
        loader={<p style={{ textAlign: 'center' }}>Loading...</p>}
        endMessage={<p style={{ textAlign: 'center' }}>All tweets loaded</p>}
      >
        {tweets.map(tweet => (
          <article key={tweet.id} style={{ padding: 16, borderBottom: '1px solid #e1e8ed' }}>
            <strong>{tweet.author}</strong>
            <p>{tweet.content}</p>
          </article>
        ))}
      </InfiniteScroll>
    </>
  );
}
```

--------------------------------

### Custom UI with useInfiniteScroll Hook

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/_autodocs/inverse-scroll.md

Create a custom UI for infinite scrolling using the `useInfiniteScroll` hook. This example demonstrates how to manage loading states and attach the scroll listener to a specific element.

```typescript
import { useInfiniteScroll } from 'react-infinite-scroll-component';

function CustomChatUI() {
  const [messages, setMessages] = useState([]);
  const [hasMore, setHasMore] = useState(true);

  const { sentinelRef, isLoading } = useInfiniteScroll({
    next: async () => {
      const older = await api.getOlderMessages(messages[0]?.id);
      if (older.length === 0) {
        setHasMore(false);
      } else {
        setMessages(prev => [...older, ...prev]);
      }
    },
    hasMore,
    dataLength: messages.length,
    inverse: true,
  });

  return (
    <div
      style={{
        height: 600,
        overflow: 'auto',
        display: 'flex',
        flexDirection: 'column-reverse',
      }}
    >
      {/* Sentinel at top (appears at bottom visually due to column-reverse) */}
      <div ref={sentinelRef} aria-hidden />
      
      {isLoading && <p>Loading older messages...</p>}
      
      {messages.map(msg => (
        <div key={msg.id}>{msg.text}</div>
      ))}
    </div>
  );
}
```

--------------------------------

### InfiniteScroll component for window scroll

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/AGENTS.md

Example of using the InfiniteScroll component for a feed-style layout with window scrolling. Ensure you have a fetchMore function and manage the items and hasMore state.

```tsx
import { useState } from 'react';
import InfiniteScroll from 'react-infinite-scroll-component';

type Item = { id: number; name: string };

function Feed() {
  const [items, setItems] = useState<Item[]>(initialItems);
  const [hasMore, setHasMore] = useState(true);

  const fetchMore = async () => {
    const next = await api.getItems({ offset: items.length });
    if (next.length === 0) {
      setHasMore(false);
      return;
    }
    setItems((prev) => [...prev, ...next]);
  };

  return (
    <InfiniteScroll
      dataLength={items.length}
      next={fetchMore}
      hasMore={hasMore}
      loader={<p>Loading...</p>}
      endMessage={<p>No more items.</p>}
    >
      {items.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </InfiniteScroll>
  );
}
```

--------------------------------

### Basic Infinite Scroll Usage in TypeScript

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/README.md

Demonstrates the fundamental setup for InfiniteScroll with state management for items and 'hasMore' flag. Requires initial data and an API function to fetch more items.

```tsx
import { useState } from 'react';
import InfiniteScroll from 'react-infinite-scroll-component';

type Item = { id: number; name: string };

function Feed() {
  const [items, setItems] = useState<Item[]>(initialItems);
  const [hasMore, setHasMore] = useState(true);

  const fetchMore = async () => {
    const next = await api.getItems({ offset: items.length });
    if (next.length === 0) {
      setHasMore(false);
      return;
    }
    setItems((prev) => [...prev, ...next]);
  };

  return (
    <InfiniteScroll
      dataLength={items.length}
      next={fetchMore}
      hasMore={hasMore}
      loader={<p>Loading...</p>}
      endMessage={<p style={{ textAlign: 'center' }}>All items loaded.</p>}
    >
      {items.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </InfiniteScroll>
  );
}
```

--------------------------------

### Create Generic Infinite List Component

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/_autodocs/types.md

This example illustrates creating a generic React functional component that wraps InfiniteScroll, allowing for typed lists of items.

```typescript
function createInfiniteList<T>(): React.FC<Props & { items: T[] }> {
  return (props) => {
    const { items, ...rest } = props;
    return (
      <InfiniteScroll {...rest}>
        {items.map((item) => (
          <div key={item.id}>{item.name}</div>
        ))}
      </InfiniteScroll>
    );
  };
}
```

--------------------------------

### Use Props Type for Custom Wrapper

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/_autodocs/types.md

This example shows how to create a custom wrapper component for InfiniteScroll, utilizing its exported Props type for type safety.

```typescript
import { Props as InfiniteScrollProps } from 'react-infinite-scroll-component';

function CustomInfiniteScroll(props: InfiniteScrollProps) {
  return <InfiniteScroll {...props} />;
}
```

--------------------------------

### Effect Dependencies for Observer Re-creation

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/_autodocs/performance-and-internals.md

Specifies dependencies for a useEffect hook that controls observer setup. The observer is recreated only when configuration-related props change, balancing performance and responsiveness.

```typescript
// Recreates observer when config changes
useEffect(() => {
  // observer setup
}, [hasMore, scrollThreshold, inverse, height, getScrollableNode]);
```

--------------------------------

### Basic Chat UI with Inverse Infinite Scroll

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/_autodocs/inverse-scroll.md

A complete example of implementing inverse scrolling for a chat interface. It uses `react-infinite-scroll-component` to load older messages when the user scrolls towards the top of the chat container.

```typescript
import { useState } from 'react';
import InfiniteScroll from 'react-infinite-scroll-component';

function ChatRoom() {
  const [messages, setMessages] = useState(initialMessages);
  const [hasMore, setHasMore] = useState(true);

  const loadOlderMessages = async () => {
    const older = await api.getMessages({
      before: messages[0].timestamp,
      limit: 20,
    });
    
    if (older.length === 0) {
      setHasMore(false);
      return;
    }
    
    // Prepend older messages to the list
    setMessages(prev => [...older, ...prev]);
  };

  return (
    <div
      style={{
        height: 600,
        display: 'flex',
        flexDirection: 'column',
        border: '1px solid #ccc',
      }}
    >
      <div style={{ padding: 12, borderBottom: '1px solid #ddd' }}>
        <h2>Chat Room</h2>
      </div>

      <div
        style={{
          flex: 1,
          overflow: 'auto',
          display: 'flex',
          flexDirection: 'column-reverse',
        }}
        id="chatContainer"
      >
        <InfiniteScroll
          dataLength={messages.length}
          next={loadOlderMessages}
          hasMore={hasMore}
          loader={<div style={{ padding: 12, textAlign: 'center' }}>Loading older messages...</div>}
          endMessage={<div style={{ padding: 12, textAlign: 'center' }}>No more messages</div>}
          inverse={true}
          scrollableTarget="chatContainer"
          style={{
            display: 'flex',
            flexDirection: 'column-reverse',
          }}
        >
          {messages.map(msg => (
            <div
              key={msg.id}
              style={{
                padding: 12,
                marginBottom: 8,
                backgroundColor: msg.isOwn ? '#e3f2fd' : '#f5f5f5',
                borderRadius: 8,
                maxWidth: '80%',
                alignSelf: msg.isOwn ? 'flex-end' : 'flex-start',
              }}
            >
              <strong>{msg.author}</strong>
              <p>{msg.text}</p>
              <small>{msg.timestamp}</small>
            </div>
          ))}
        </InfiniteScroll>
      </div>

      <div style={{ padding: 12, borderTop: '1px solid #ddd' }}>
        <input type="text" placeholder="Type a message..." style={{ width: '100%' }} />
      </div>
    </div>
  );
}

```

--------------------------------

### Inverse Scroll Accessibility Example

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/_autodocs/inverse-scroll.md

Implement semantic structure for screen readers using ARIA roles and attributes when using inverse scroll. Ensure new messages are announced politely.

```typescript
<div role="log" aria-label="Chat messages" aria-live="polite">
  <InfiniteScroll
    inverse={true}
    role="feed"
    aria-label="Messages (newest last)"
    // ... props
  >
    {messages.map(msg => (
      <article key={msg.id} role="article">
        <strong>{msg.author}</strong>: {msg.text}
        <time dateTime={msg.timestamp}>{msg.time}</time>
      </article>
    ))}
  </InfiniteScroll>
</div>
```

--------------------------------

### InfiniteScroll component with ref for fixed-height container

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/AGENTS.md

Alternative to using an ID, this example shows how to use a ref to specify the scrollable container for the InfiniteScroll component. Ensure the ref is correctly attached to the scrollable element.

```tsx
const containerRef = useRef<HTMLDivElement>(null);

<div ref={containerRef} style={{ height: 400, overflow: 'auto' }}>
  <InfiniteScroll
    dataLength={items.length}
    next={fetchMore}
    hasMore={hasMore}
    loader={<p>Loading...</p>}
    scrollableTarget={containerRef.current}
  >
    {items.map((item) => (
      <div key={item.id}>{item.name}</div>
    ))}
  </InfiniteScroll>
</div>;
```

--------------------------------

### Styling the Pull Indicator with CSS

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/_autodocs/pull-to-refresh.md

Apply CSS classes to the custom pull indicator elements to control their appearance. This example demonstrates basic styling for padding, text alignment, and background gradients, as well as state-specific text colors.

```css
.pull-indicator {
  padding: 20px;
  text-align: center;
  background: linear-gradient(to bottom, #f0f0f0, transparent);
}

.pull-state p {
  color: #999;
}

.release-state p {
  color: #4CAF50;
  font-weight: bold;
}
```

--------------------------------

### UMD Browser Import

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/_autodocs/module-exports.md

Include the library via a CDN and access exports through the global `window.ReactInfiniteScrollComponent` object for browser environments.

```html
<script src="https://unpkg.com/react-infinite-scroll-component"></script>
<script>
  const { default: InfiniteScroll, useInfiniteScroll } = window.ReactInfiniteScrollComponent;
</script>
```

--------------------------------

### Chat with Pull-to-Refresh

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/_autodocs/inverse-scroll.md

Implement inverse scroll with pull-to-refresh for loading the latest messages in a chat interface. This example uses the `pullDownToRefresh` and `refreshFunction` props.

```typescript
function ChatWithRefresh() {
  const [messages, setMessages] = useState(initialMessages);
  const [hasMore, setHasMore] = useState(true);

  const loadLatestMessages = async () => {
    // Refresh gets the most recent messages
    const latest = await api.getLatestMessages();
    setMessages(latest);
    setHasMore(true); // Reset to allow loading older again
  };

  const loadOlderMessages = async () => {
    const older = await api.getMessages({ before: messages[0].timestamp });
    if (older.length === 0) {
      setHasMore(false);
      return;
    }
    setMessages(prev => [...older, ...prev]);
  };

  return (
    <div
      id="chatBox"
      style={{
        height: 600,
        display: 'flex',
        flexDirection: 'column-reverse',
        overflow: 'auto',
      }}
    >
      <InfiniteScroll
        dataLength={messages.length}
        next={loadOlderMessages}
        hasMore={hasMore}
        loader={<p>Loading older messages...</p>}
        inverse={true}
        scrollableTarget="chatBox"
        style={{ display: 'flex', flexDirection: 'column-reverse' }}
        pullDownToRefresh
        refreshFunction={loadLatestMessages}
        pullDownToRefreshContent={
          <h3 style={{ textAlign: 'center' }}>↓ Pull down for latest</h3>
        }
        releaseToRefreshContent={
          <h3 style={{ textAlign: 'center' }}>↑ Release for latest</h3>
        }
      >
        {messages.map(msg => (
          <div key={msg.id} style={{ padding: 8 }}>
            <strong>{msg.author}</strong>: {msg.text}
          </div>
        ))}
      </InfiniteScroll>
    </div>
  );
}
```

--------------------------------

### Basic Import and Usage

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/_autodocs/module-exports.md

Demonstrates the standard way to import the InfiniteScroll component and use it within JSX. Ensure you have dataLength, next, hasMore, and loader props defined.

```typescript
import InfiniteScroll from 'react-infinite-scroll-component';

// In JSX
<InfiniteScroll
  dataLength={items.length}
  next={fetchMore}
  hasMore={hasMore}
  loader={<p>Loading...</p>}
>
  {items.map(item => <div key={item.id}>{item.name}</div>)}
</InfiniteScroll>
```

--------------------------------

### Infinite Scroll Component Window Scroll Mode

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/_autodocs/quick-reference.md

Example of using the InfiniteScroll component for window scroll mode. Omit scrollableTarget and height props.

```typescript
<InfiniteScroll
  dataLength={items.length}
  next={fetchMore}
  hasMore={hasMore}
  loader={<p>Loading...</p>}
>
  {items}
</InfiniteScroll>
```

--------------------------------

### Manual buildRootMargin Usage

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/_autodocs/build-root-margin.md

Demonstrates manual usage of the buildRootMargin utility function for custom scroll observer implementations. It shows how to generate rootMargin strings for different scenarios, including pixel and percentage values, and inverse mode.

```typescript
import { buildRootMargin } from 'react-infinite-scroll-component';

const margin1 = buildRootMargin(0.8, false);
// Returns: "0px 0px 20% 0px"

const margin2 = buildRootMargin("300px", false);
// Returns: "0px 0px 300px 0px"

const margin3 = buildRootMargin(0.5, true);
// Returns: "50% 0px 0px 0px"

const observer = new IntersectionObserver(callback, {
  root: containerRef.current,
  rootMargin: margin1,
  threshold: 0,
});
```

--------------------------------

### Infinite Scroll Component Fixed Height Scroll Mode

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/_autodocs/quick-reference.md

Example of using the InfiniteScroll component with a fixed height. Set the height prop to a number representing pixels.

```typescript
<InfiniteScroll
  dataLength={items.length}
  next={fetchMore}
  hasMore={hasMore}
  loader={<p>Loading...</p>}
  height={500}
>
  {items}
</InfiniteScroll>
```

--------------------------------

### Import useInfiniteScroll hook

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/AGENTS.md

Import the useInfiniteScroll hook for custom UI implementations.

```tsx
import { useInfiniteScroll } from 'react-infinite-scroll-component';
```

--------------------------------

### Import InfiniteScroll Component and Hook

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/_autodocs/quick-reference.md

Import the main InfiniteScroll component and the useInfiniteScroll hook along with their types.

```typescript
import InfiniteScroll from 'react-infinite-scroll-component';
import { useInfiniteScroll } from 'react-infinite-scroll-component';
import type { 
  UseInfiniteScrollOptions,
  UseInfiniteScrollResult,
} from 'react-infinite-scroll-component';
```

--------------------------------

### Peer Dependencies for React Infinite Scroll Component

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/_autodocs/module-exports.md

The package requires React and ReactDOM versions 17 or higher. These must be installed separately as they are peer dependencies and not bundled with the package.

```json
{
  "peerDependencies": {
    "react": ">=17",
    "react-dom": ">=17"
  }
}
```

--------------------------------

### UseInfiniteScrollOptions Interface

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/_autodocs/types.md

Options passed to the useInfiniteScroll hook to configure its behavior.

```APIDOC
## UseInfiniteScrollOptions Interface

### Description
Options passed to the `useInfiniteScroll` hook.

### Fields
#### `next`
- **Type**: `() => void`
- **Required**: yes
- **Description**: Callback when sentinel enters viewport.

#### `hasMore`
- **Type**: `boolean`
- **Required**: yes
- **Description**: Whether more data exists.

#### `dataLength`
- **Type**: `number`
- **Required**: yes
- **Description**: Current item count.

#### `scrollThreshold`
- **Type**: `number | string`
- **Required**: no
- **Default**: `0.8`
- **Description**: Trigger point for the load.

#### `scrollableTarget`
- **Type**: `HTMLElement | string | null`
- **Required**: no
- **Description**: Custom scroll root element.

#### `inverse`
- **Type**: `boolean`
- **Required**: no
- **Default**: `false`
- **Description**: Reverse scroll direction.
```

--------------------------------

### Hook Import and Usage

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/_autodocs/module-exports.md

Shows how to import and utilize the useInfiniteScroll hook for managing infinite scroll logic. It returns a sentinelRef for the scrollable element and an isLoading state.

```typescript
import { useInfiniteScroll } from 'react-infinite-scroll-component';

const { sentinelRef, isLoading } = useInfiniteScroll({
  next: loadMore,
  hasMore: hasMore,
  dataLength: items.length,
});
```

--------------------------------

### useInfiniteScroll Hook Props and Returns

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/llms.txt

This section details the props accepted by the useInfiniteScroll hook and the values it returns, facilitating programmatic infinite scrolling.

```APIDOC
## All props, useInfiniteScroll hook

| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| `dataLength` | `number` | yes |   | Length of the full rendered list. |
| `next` | `() => void` | yes |   | Fetch next page. |
| `hasMore` | `boolean` | yes |   | false = disconnect observer. |
| `scrollThreshold` | `number \| string` | no | `0.8` | Trigger distance. |
| `scrollableTarget` | `HTMLElement \| string \| null` | no |   | Observer root. |
| `inverse` | `boolean` | no | `false` | Observe from top. |

Returns: `{ sentinelRef: RefObject<HTMLDivElement>, isLoading: boolean }`
```

--------------------------------

### Infinite Scroll Component Custom Parent Scroll Mode

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/_autodocs/quick-reference.md

Example of using the InfiniteScroll component with a custom parent scrollable element. Use the scrollableTarget prop with the ID of the parent element.

```typescript
<div id="scroll" style={{ height: 500, overflow: 'auto' }}>
  <InfiniteScroll
    dataLength={items.length}
    next={fetchMore}
    hasMore={hasMore}
    loader={<p>Loading...</p>}
    scrollableTarget="scroll"
  >
    {items}
  </InfiniteScroll>
</div>
```

--------------------------------

### Disable Pull-to-Refresh When Not at Top

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/_autodocs/pull-to-refresh.md

Control the pull-to-refresh functionality based on the scroll position. The component prevents pulling when scrollTop > 0, but this example adds explicit logic to manage the `canRefresh` state.

```typescript
const [canRefresh, setCanRefresh] = useState(true);

const handleScroll = (e) => {
  const scrollTop = e.target.scrollTop;
  setCanRefresh(scrollTop === 0);
};

return (
  <InfiniteScroll
    pullDownToRefresh={canRefresh}
    onScroll={handleScroll}
    // ... other props
  >
    {items}
  </InfiniteScroll>
);
```

--------------------------------

### Number Input - Fraction to Percentage Conversion

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/_autodocs/parse-threshold.md

Handles number inputs by interpreting them as fractions of container height, converting them to percentages, and returning the result.

```typescript
// Input: 0.8 → Output: { unit: 'Percent', value: 80 }
// Input: 0.5 → Output: { unit: 'Percent', value: 50 }
// Input: 1 → Output: { unit: 'Percent', value: 100 }
// Input: 0.2 → Output: { unit: 'Percent', value: 20 }
```

--------------------------------

### Implement Pagination for Data Fetching

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/_autodocs/quick-reference.md

Manage data fetching by storing and updating offset and limit values instead of loading all items at once. This approach is useful for large datasets.

```typescript
const [offset, setOffset] = useState(0);
next: async () => {
  const page = await fetchPage(offset);
  setItems(prev => [...prev, ...page]);
  setOffset(offset + 20);
}
```

--------------------------------

### Comment Thread (Newest Last)

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/_autodocs/inverse-scroll.md

Display a comment thread with the newest comments appearing last, utilizing inverse scrolling. This example focuses on loading older comments when the user scrolls up.

```typescript
function CommentThread() {
  const [comments, setComments] = useState(initialComments);
  const [hasMore, setHasMore] = useState(true);

  const loadOlderComments = async () => {
    const older = await api.getComments({
      postId: currentPost.id,
      before: comments[0].id,
    });
    
    if (older.length === 0) {
      setHasMore(false);
      return;
    }
    
    setComments(prev => [...older, ...prev]);
  };

  return (
    <div style={{ height: 500, overflow: 'auto', display: 'flex', flexDirection: 'column-reverse' }}>
      <InfiniteScroll
        dataLength={comments.length}
        next={loadOlderComments}
        hasMore={hasMore}
        loader={<p>Loading older comments...</p>}
        inverse={true}
        style={{ display: 'flex', flexDirection: 'column-reverse' }}
      >
        {comments.map(comment => (
          <div key={comment.id} style={{ padding: 12, borderBottom: '1px solid #eee' }}>
            <strong>{comment.author}</strong>
            <p>{comment.text}</p>
            <small>{comment.createdAt}</small>
          </div>
        ))}
      </InfiniteScroll>
    </div>
  );
}
```

--------------------------------

### Multiple Independent Infinite Scroll Lists

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/_autodocs/use-infinite-scroll-hook.md

Demonstrates how to manage multiple independent infinite scroll lists on the same page, each with its own hook instance, sentinel, and loading state.

```typescript
function MultiListPage() {
  const [list1, setList1] = useState([]);
  const [list1More, setList1More] = useState(true);

  const [list2, setList2] = useState([]);
  const [list2More, setList2More] = useState(true);

  const list1Hook = useInfiniteScroll({
    next: async () => {
      const more = await api.fetchList1(list1.length);
      setList1((prev) => [...prev, ...more]);
      if (more.length < 20) setList1More(false);
    },
    hasMore: list1More,
    dataLength: list1.length,
  });

  const list2Hook = useInfiniteScroll({
    next: async () => {
      const more = await api.fetchList2(list2.length);
      setList2((prev) => [...prev, ...more]);
      if (more.length < 20) setList2More(false);
    },
    hasMore: list2More,
    dataLength: list2.length,
  });

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
      <div style={{ height: 400, overflow: 'auto' }}>
        {list1.map((item) => (
          <div key={item.id}>{item.name}</div>
        ))}
        <div ref={list1Hook.sentinelRef} aria-hidden />
        {list1Hook.isLoading && <p>Loading list 1...</p>}
      </div>

      <div style={{ height: 400, overflow: 'auto' }}>
        {list2.map((item) => (
          <div key={item.id}>{item.name}</div>
        ))}
        <div ref={list2Hook.sentinelRef} aria-hidden />
        {list2Hook.isLoading && <p>Loading list 2...</p>}
      </div>
    </div>
  );
}
```

--------------------------------

### Accessibility: Announce Loading State

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/_autodocs/use-infinite-scroll-hook.md

Use a separate live region with `role="status"` and `aria-live="polite"` to announce loading state to screen readers.

```typescript
<div ref={sentinelRef} aria-hidden="true" />\n<div role="status" aria-live="polite">\n  {isLoading && <span>Loading more items</span>}\n</div>
```

--------------------------------

### InfiniteScroll component for fixed-height container scroll

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/AGENTS.md

Example of using the InfiniteScroll component within a fixed-height container that has overflow enabled. The scrollableTarget prop must be set to the ID of the scrollable element.

```tsx
<div id="scrollableDiv" style={{ height: 400, overflow: 'auto' }}>
  <InfiniteScroll
    dataLength={items.length}
    next={fetchMore}
    hasMore={hasMore}
    loader={<p>Loading...</p>}
    scrollableTarget="scrollableDiv"
  >
    {items.map((item) => (
      <div key={item.id}>{item.name}</div>
    ))}
  </InfiniteScroll>
</div>
```

--------------------------------

### useInfiniteScroll Hook API

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/_autodocs/COMPLETION_SUMMARY.txt

Documentation for the `useInfiniteScroll` hook, detailing its options, return values, behavior, and integration patterns.

```APIDOC
## useInfiniteScroll Hook

### Description
The `useInfiniteScroll` hook provides a programmatic way to manage infinite scrolling logic within your components, offering more flexibility than the `InfiniteScroll` component.

### Options (`UseInfiniteScrollOptions`)
- **`next`** (function) - Required - Function to call when more data needs to be fetched.
- **`hasMore`** (boolean) - Required - Indicates if there are more items to load.
- **`scrollThreshold`** (string | number) - Optional - Threshold for triggering `next`. Similar to the `InfiniteScroll` component's prop.
- **`inverse`** (boolean) - Optional - Enables inverse scrolling behavior.

### Return Value (`UseInfiniteScrollResult`)
- **`containerRef`** (RefObject) - A ref object to attach to the scrollable container element.
- **`loader`** (ReactNode) - The loader element to be rendered when data is loading.
- **`endMessage`** (ReactNode) - The end message element to be rendered when `hasMore` is false.

### Behavior and Lifecycle
The hook manages the scroll event listeners and IntersectionObserver instances internally. It updates the state related to loading and end-of-list conditions based on the provided options and scroll position.

### Usage Examples
Refer to the `use-infinite-scroll-hook.md` file for detailed usage examples and integration patterns.
```

--------------------------------

### Document Dependencies

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/_autodocs/INDEX.md

This code block lists the markdown files that form the documentation structure for the react-infinite-scroll-component. It shows the entry point and the various sub-documents.

```markdown
README.md (entry point)
├── quick-reference.md (patterns & examples)
├── infinite-scroll-component.md (main component)
├── use-infinite-scroll-hook.md (hook API)
├── scroll-modes.md (scroll configuration)
├── pull-to-refresh.md (feature guide)
├── inverse-scroll.md (feature guide)
├── types.md (TypeScript types)
├── module-exports.md (import paths)
├── build-root-margin.md (utility)
├── parse-threshold.md (utility)
└── performance-and-internals.md (advanced)
```

--------------------------------

### Chat with Inverse Scroll

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/_autodocs/quick-reference.md

Example of implementing inverse scrolling for a chat interface, where new messages appear at the bottom and older messages load upwards. Requires a scrollable target element with `flexDirection: 'column-reverse'`.

```typescript
function Chat() {
  const [messages, setMessages] = useState([]);
  const [hasMore, setHasMore] = useState(true);

  return (
    <div
      id="chat"
      style={{
        height: 600,
        overflow: 'auto',
        display: 'flex',
        flexDirection: 'column-reverse',
      }}
    >
      <InfiniteScroll
        dataLength={messages.length}
        next={loadOlderMessages}
        hasMore={hasMore}
        loader={<p>Loading...</p>}
        inverse
        scrollableTarget="chat"
        style={{ display: 'flex', flexDirection: 'column-reverse' }}
      >
        {messages.map(msg => <div key={msg.id}>{msg.text}</div>)}
      </InfiniteScroll>
    </div>
  );
}
```

--------------------------------

### Animated Pull-to-Refresh Indicators

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/_autodocs/pull-to-refresh.md

Create animated pull-to-refresh indicators by manipulating CSS `transform` and `transition` properties within the `pullDownToRefreshContent` and `releaseToRefreshContent` props. This example uses a rotating arrow to indicate the refresh state.

```typescript
import { useRef } from 'react';

function AnimatedPullToRefresh() {
  const rotationRef = useRef(0);

  return (
    <InfiniteScroll
      pullDownToRefresh
      refreshFunction={refresh}
      pullDownToRefreshThreshold={80}
      pullDownToRefreshContent={
        <div style={{
          textAlign: 'center',
          padding: 20,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          gap: 8,
        }}>
          <span style={{
            fontSize: 24,
            transform: 'rotate(0deg)',
            transition: 'transform 0.3s ease',
          }}>
            ⬇️
          </span>
          <p>Pull to refresh</p>
        </div>
      }
      releaseToRefreshContent={
        <div style={{
          textAlign: 'center',
          padding: 20,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          gap: 8,
        }}>
          <span style={{
            fontSize: 24,
            transform: 'rotate(180deg)',
            transition: 'transform 0.3s ease',
          }}>
            ⬇️
          </span>
          <p>Release to refresh</p>
        </div>
      }
      // ... other props
    >
      {/* Items */}
    </InfiniteScroll>
  );
}
```

--------------------------------

### Configure Built-in UI Elements

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/_autodocs/README.md

Customize the loader, end message, and pull-to-refresh UI using built-in props.

```typescript
// All built-in UI
<InfiniteScroll
  loader={<Spinner />}
  endMessage={<p>All loaded</p>}
  pullDownToRefresh
  refreshFunction={refresh}
  pullDownToRefreshContent={<h3>↓ Pull</h3>}
  releaseToRefreshContent={<h3>↑ Release</h3>}
  ...
/>
```

--------------------------------

### Fixed-Height Container with Custom Scroll Threshold

Source: https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/_autodocs/use-infinite-scroll-hook.md

Shows how to use infinite scroll within a fixed-height container and trigger loading based on a custom scroll threshold from the bottom.

```typescript
const containerRef = useRef<HTMLDivElement>(null);

const { sentinelRef, isLoading } = useInfiniteScroll({
  next: loadMore,
  hasMore: hasMore,
  dataLength: items.length,
  scrollableTarget: containerRef.current,
  scrollThreshold: '300px', // Trigger 300px from bottom
});

return (
  <div ref={containerRef} style={{ height: 500, overflow: 'auto' }}>
    {items.map((item) => (
      <div key={item.id}>{item.title}</div>
    ))}
    <div ref={sentinelRef} aria-hidden />
    {isLoading && <p>Loading more...</p>}
  </div>
);
```