Use space list

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.

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";
  visibility?: "public" | "unlisted" | "private";
  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.

Reorder rules Use space list actions

Overview

Auth Hooks

Current User

User Profiles

Entities

Entity Lists

Spaces

Spaces — Rules

Space Lists

Events

Comments

Reactions

Follows

Connections

Collections

App Notifications

Push Notifications

Chat — Conversations

Chat — Messages

Chat — Core

Search

Reports

Storage

Crypto

Project

Custom Tables

Overview

Usage Example

Parameters

Returns

​Overview

​Usage Example

​Parameters

​Returns

Overview

Usage Example

Parameters

Returns