Space Lists

Browse, search, and paginate spaces with filtering and sorting

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 "@sublay/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

Value	Description
"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

Hook	Description
useSpaceList	Main hook for paginated space lists
useSpaceListActions	Low-level list actions (used internally by useSpaceList)
useFetchManySpaces	One-off fetch of multiple spaces
useFetchUserSpaces	Fetch spaces the current user is a member of