Skip to main content
The SpaceProvider and useSpace hook are the primary way to work with a single space in your app. The provider fetches and manages the space data; the hook exposes everything to your components.

​
SpaceProvider

Place SpaceProvider anywhere in your tree where space data is needed. You can identify the space by UUID, shortId, or slug — or skip the fetch entirely by passing a pre-fetched space object directly. 
import { SpaceProvider } from "@replyke/react-js";

// By UUID
<SpaceProvider spaceId="space-uuid">
  <SpaceContent />
</SpaceProvider>

// By shortId
<SpaceProvider shortId="abc123">
  <SpaceContent />
</SpaceProvider>

// By slug
<SpaceProvider slug="my-community">
  <SpaceContent />
</SpaceProvider>

// Pre-fetched object (no fetch needed — useful for SSR or when the space is already loaded)
<SpaceProvider space={mySpace}>
  <SpaceContent />
</SpaceProvider>

​
Props

​
spaceId
string
UUID of the space to load. Use this, shortId, or slug.
​
shortId
string
Short identifier of the space. Use this, spaceId, or slug.
​
slug
string
URL slug of the space. Use this, spaceId, or shortId.
​
space
SpaceDetailed
A pre-fetched space object. Skips the initial fetch if provided. Useful for SSR or when the space is already loaded in a parent component.
​
include
"files" | string[]
Optional. Pass "files" to include avatar and banner file data in the fetched space.
SpaceProvider renders null if none of spaceId, shortId, slug, or space is provided.

​
useSpace

useSpace must be called inside a descendant of SpaceProvider. 
import { useSpace } from "@replyke/react-js";

function SpaceContent() {
  const {
    space,
    isMember,
    isAdmin,
    isModerator,
    canPost,
    canModerate,
    membershipStatus,
    isPending,
    isBanned,
    breadcrumb,
    parentSpace,
    childSpaces,
    joinSpace,
    leaveSpace,
    updateSpace,
    deleteSpace,
    loading,
    error,
  } = useSpace();
}

​
Return Values

​
Space State

​
space
SpaceDetailed | null | undefined
The loaded space object. undefined while loading, null if not found.
​
loading
boolean
true while the space is being fetched.
​
error
string | null
Error message if the fetch failed.

​
Membership & Permissions

​
isMember
boolean
true if the current user has an active membership in this space.
​
isAdmin
boolean
true if the current user is an admin of this space.
​
isModerator
boolean
true if the current user is a moderator of this space.
​
canPost
boolean
true if the current user can post entities in this space, based on the space’s postingPermission and the user’s membership status.
​
canModerate
boolean
true if the current user can perform moderation actions in this space.
​
membershipStatus
"pending" | "active" | "banned" | null
The current user’s 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.

​
Hierarchy

​
breadcrumb
SpacePreview[]
Ordered list of ancestor spaces from root to direct parent. Empty for root-level spaces.
​
parentSpace
SpacePreview | null
Preview of the immediate parent space. null for root spaces.
​
childSpaces
SpacePreview[]
Previews of direct child spaces (up to 10 returned by the API).

​
Operations

​
joinSpace
() => Promise<void>
Join the current space. If the space requires approval, the membership enters pending status.
​
leaveSpace
() => Promise<void>
Leave the current space.
​
updateSpace
(props: { update }) => Promise<SpaceDetailed | undefined>
Update space settings. Only available to admins.
​
deleteSpace
() => Promise<void>
Delete the space and all associated data. Only available to admins.
​
setSpace
React.Dispatch
Directly set the space state. Useful for optimistic local updates.

​
Example: Space Page with Membership Button

import { SpaceProvider, useSpace } from "@replyke/react-js";

function SpacePage({ spaceId }: { spaceId: string }) {
  return (
    <SpaceProvider spaceId={spaceId}>
      <SpaceHeader />
    </SpaceProvider>
  );
}

function SpaceHeader() {
  const { space, isMember, 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>
      <p>{space.description}</p>
      <p>{space.membersCount} members</p>
      {!isMember && !isPending && (
        <button onClick={joinSpace}>Join</button>
      )}
      {isPending && <p>Waiting for approval...</p>}
      {isMember && (
        <button onClick={leaveSpace}>Leave</button>
      )}
    </div>
  );
}

​
See Also