Skip to main content
The useSpaceList hook provides a Redux-backed, paginated list of spaces with support for filtering, sorting, and search. It is designed for discovery pages, community browsers, and admin dashboards.

​
Basic Usage

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>
  );
}

​
Filtering and Sorting

// Search by name
fetchSpaces({ sortBy: "newest", searchName: "gaming" });

// Search across all fields (name, slug, description)
fetchSpaces({ sortBy: "newest", searchAny: "design" });

// Filter to spaces the current user is a member of
fetchSpaces({ sortBy: "newest", memberOf: true });

// Fetch only child spaces of a parent
fetchSpaces({ sortBy: "newest", parentSpaceId: "parent-space-id" });

// Fetch top-level spaces only
fetchSpaces({ sortBy: "newest", parentSpaceId: null });

​
Sort Options

ValueDescription
"newest"Most recently created first
"oldest"Oldest first
"most_members"Most members first
"least_members"Fewest members first

​
Creating and Deleting from a List

useSpaceList also exposes create and delete operations that automatically update the list state: 
const { createSpace, deleteSpace } = useSpaceList({ listId: "my-list" });

// Create a new space and insert it into the list
const newSpace = await createSpace({
  name: "New Community",
  readingPermission: "anyone",
  postingPermission: "members",
  requireJoinApproval: true,
  insertPosition: "first", // or "last"
});

// Delete a space and remove it from the list
await deleteSpace({ spaceId: "space-id" });

​
Multiple Independent Lists

Each useSpaceList call uses a listId to maintain independent Redux state. You can have multiple lists on the same page without interference: 
const allSpaces = useSpaceList({ listId: "all" });
const mySpaces = useSpaceList({ listId: "my-spaces" });

// Both lists are independent
allSpaces.fetchSpaces({ sortBy: "newest" });
mySpaces.fetchSpaces({ sortBy: "newest", memberOf: true });

​
Return Values

​
spaces
Space[]
The current page of loaded spaces.
​
loading
boolean
true while fetching.
​
hasMore
boolean
true if there are more pages to load.
​
fetchSpaces
function
Trigger a new fetch with the given filters and configuration. Resets to page 1.
​
loadMore
function
Fetch the next page of results and append to the current list.
​
createSpace
function
Create a new space and insert it into the list.
​
deleteSpace
function
Delete a space and remove it from the list.

​
Hook Reference

HookDescription
useSpaceListMain hook for paginated space lists
useSpaceListActionsLow-level list actions (used internally by useSpaceList)
useFetchManySpacesOne-off fetch of multiple spaces
useFetchUserSpacesFetch spaces the current user is a member of