Skip to main content

​
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 "@replyke/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.