Use space

Access space data, permissions, and operations from SpaceProvider context

Overview

useSpace returns the current space state and all operations from the nearest SpaceProvider. It is the primary way to interact with a space in your component tree.

This hook must be used inside a SpaceProvider.

Usage Example

import { useSpace } from "@sublay/react-js";

function SpaceHeader() {
  const {
    space,
    isMember,
    isAdmin,
    canPost,
    isPending,
    joinSpace,
    leaveSpace,
    loading,
  } = useSpace();

  if (loading) return <p>Loading...</p>;
  if (!space) return <p>Space not found.</p>;

  return (
    <div>
      <h1>{space.name}</h1>
      {!isMember && !isPending && (
        <button onClick={joinSpace}>Join</button>
      )}
      {isPending && <p>Awaiting approval...</p>}
      {isMember && <button onClick={leaveSpace}>Leave</button>}
    </div>
  );
}

Returns

space · SpaceDetailed | null | undefined

The loaded space. undefined while loading, null if not found.

loading · boolean

true while fetching the space.

error · string | null

Error message if the fetch failed.

isMember · boolean

true if the current user has an active membership.

isAdmin · boolean

true if the current user is a space admin.

isModerator · boolean

true if the current user is a space moderator.

canPost · boolean

true if the current user can post entities in this space.

canModerate · boolean

true if the current user can perform moderation actions.

membershipStatus · "pending" | "active" | "banned" | null

Raw membership status. null if not a member.

isPending · boolean

true if the user’s join request is awaiting approval.

isBanned · boolean

true if the user is banned from this space.

breadcrumb · SpacePreview[]

Ancestor spaces from root to direct parent. Empty for root spaces.

parentSpace · SpacePreview | null

Preview of the parent space. null for root spaces.

childSpaces · SpacePreview[]

Previews of direct child spaces (up to 10).

joinSpace · () => Promise<void>

Join the space. Creates a pending membership when approval is required.

leaveSpace · () => Promise<void>

Leave the space.

updateSpace · (props: { update }) => Promise<SpaceDetailed | undefined>

Update space settings (admin only).

deleteSpace · () => Promise<void>

Delete the space (admin only).

setSpace · React.Dispatch

Directly update the space state for optimistic UI updates.

For integration guidance, see SpaceProvider & useSpace.