Skip to main content

​
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.

​
Usage Example

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

​
listId
string
required
Unique identifier for this list’s Redux state slice. Use distinct IDs for independent lists.

​
Returns

​
spaces
Space[]
Currently loaded spaces.
​
loading
boolean
true while fetching.
​
hasMore
boolean
true if more pages are available.
​
fetchSpaces
function
Trigger a new fetch. Resets to page 1. Accepts filter and config parameters.
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
​
loadMore
() => void
Fetch the next page and append results.
​
createSpace
function
Create a new space and insert it into the list.
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>
​
deleteSpace
function
Delete a space and remove it from the list.
deleteSpace(props: { spaceId: string }) => Promise<void>
​
sortBy
string | null
Current sort setting from Redux state.
​
searchSlug
string | null
Current slug search query from Redux state.
​
searchName
string | null
Current name search query from Redux state.
​
searchDescription
string | null
Current description search query from Redux state.
​
searchAny
string | null
Current general search query from Redux state.
​
readingPermission
"anyone" | "members" | null
Current reading permission filter from Redux state.
​
memberOf
boolean
Current membership filter from Redux state.
​
parentSpaceId
string | null
Current parent space filter from Redux state.