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.

Usage Example

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

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.