> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replyke.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Use space list

> Paginated, filterable list of spaces backed by Redux state

## Overview

`useSpaceList` provides a stateful, paginated list of spaces with support for filtering, sorting, search, and creation. Each list is identified by a `listId` and maintains independent Redux state, allowing multiple lists on the same page.

For full integration guidance, see [Space Lists](/sdk/spaces/space-lists).

## Usage Example

```tsx theme={null}
import { useSpaceList } from "@replyke/react-js";
import { useEffect } from "react";

function SpaceDirectory() {
  const { spaces, loading, hasMore, fetchSpaces, loadMore } = useSpaceList({ listId: "directory" });

  useEffect(() => {
    fetchSpaces({ sortBy: "newest" });
  }, []);

  return (
    <div>
      {spaces.map((space) => <div key={space.id}>{space.name}</div>)}
      {hasMore && <button onClick={loadMore} disabled={loading}>Load more</button>}
    </div>
  );
}
```

## Parameters

<ParamField path="listId" type="string" required>
  Unique identifier for this list's Redux state slice. Use distinct IDs for independent lists.
</ParamField>

## Returns

<ResponseField name="spaces" type="Space[]">
  Currently loaded spaces.
</ResponseField>

<ResponseField name="loading" type="boolean">
  `true` while fetching.
</ResponseField>

<ResponseField name="hasMore" type="boolean">
  `true` if more pages are available.
</ResponseField>

<ResponseField name="fetchSpaces" type="function">
  Trigger a new fetch. Resets to page 1. Accepts filter and config parameters.

  ```ts theme={null}
  fetchSpaces(
    filters: {
      sortBy?: "newest" | "oldest" | "most_members" | "least_members";
      searchSlug?: string | null;
      searchName?: string | null;
      searchDescription?: string | null;
      searchAny?: string | null;
      readingPermission?: "anyone" | "members" | null;
      memberOf?: boolean;
      parentSpaceId?: string | null;
    },
    config?: { limit?: number },
    options?: { fetchImmediately?: boolean; resetUnspecified?: boolean; clearImmediately?: boolean }
  ) => void
  ```
</ResponseField>

<ResponseField name="loadMore" type="() => void">
  Fetch the next page and append results.
</ResponseField>

<ResponseField name="createSpace" type="function">
  Create a new space and insert it into the list.

  ```ts theme={null}
  createSpace(props: {
    name: string;
    slug?: string | null;
    description?: string | null;
    avatar?: string | null;
    banner?: string | null;
    readingPermission?: "anyone" | "members";
    postingPermission?: "anyone" | "members" | "admins";
    requireJoinApproval?: boolean;
    metadata?: Record<string, any>;
    parentSpaceId?: string | null;
    insertPosition?: "first" | "last";
  }) => Promise<Space | undefined>
  ```
</ResponseField>

<ResponseField name="deleteSpace" type="function">
  Delete a space and remove it from the list.

  ```ts theme={null}
  deleteSpace(props: { spaceId: string }) => Promise<void>
  ```
</ResponseField>

<ResponseField name="sortBy" type="string | null">
  Current sort setting from Redux state.
</ResponseField>

<ResponseField name="searchSlug" type="string | null">
  Current slug search query from Redux state.
</ResponseField>

<ResponseField name="searchName" type="string | null">
  Current name search query from Redux state.
</ResponseField>

<ResponseField name="searchDescription" type="string | null">
  Current description search query from Redux state.
</ResponseField>

<ResponseField name="searchAny" type="string | null">
  Current general search query from Redux state.
</ResponseField>

<ResponseField name="readingPermission" type="&#x22;anyone&#x22; | &#x22;members&#x22; | null">
  Current reading permission filter from Redux state.
</ResponseField>

<ResponseField name="memberOf" type="boolean">
  Current membership filter from Redux state.
</ResponseField>

<ResponseField name="parentSpaceId" type="string | null">
  Current parent space filter from Redux state.
</ResponseField>