useActiveWorkspace
The useActiveWorkspace hook provides access to the currently active workspace and methods to manage it.
Return Value
The active workspace object
activeMembership
WorkspaceMembership | null
User’s membership in active workspace
Show Refetch the active workspace
Resolves when the active workspace is refetched
Show Update the active workspace
Workspace fields to update
Show Get workspace members
options
{ page?: number; limit?: number }
Pagination options
returns
Promise<{ data: WorkspaceMember[]; total: number }>
Paginated list of workspace members
Show Leave the active workspace
Resolves when the user has left the workspace
Show Delete the active workspace
Resolves when the workspace is deleted
Show Remove a member from the workspace
Resolves when the member is removed
Show Add a role to a workspace member
Resolves when the role is added
Show Remove a role from a workspace member
Resolves when the role is removed
Show Invite a member to the workspace
Email address of the user to invite
Optional workspace role ID to assign
The invitation object if successful, or undefined if no active workspace
Return Types
Unique identifier for the invitation
Email address of the invited user
ID of the workspace this invitation belongs to
Initial role assigned in the workspace
ISO 8601 timestamp when the invitation expires
ISO 8601 timestamp when the invitation was accepted, or null if pending
ISO 8601 timestamp when the invitation was created
Unique identifier for the role
List of permissions granted by this role
Show Get workspace invitations
List of workspace invitations
Show Discard a workspace invitation
The invitation ID to discard
Resolves when the invitation is discarded
Show Resend a workspace invitation
The invitation ID to resend
Examples
Display Active Workspace
import { useActiveWorkspace } from "@wacht/tanstack-router";
function WorkspaceHeader() {
const { activeWorkspace } = useActiveWorkspace();
return (
<header>
<h1>{activeWorkspace?.name}</h1>
<p>{activeWorkspace?.description}</p>
</header>
);
}
Update Workspace
import { useActiveWorkspace } from "@wacht/tanstack-router";
function WorkspaceSettings() {
const { updateWorkspace } = useActiveWorkspace();
const handleUpdate = async () => {
await updateWorkspace({
name: "Updated Name",
description: "Updated description",
});
};
return <button onClick={handleUpdate}>Update Workspace</button>;
}
Get Members
import { useActiveWorkspace } from "@wacht/tanstack-router";
function WorkspaceMembers() {
const { getMembers } = useActiveWorkspace();
const [members, setMembers] = useState([]);
useEffect(() => {
getMembers({ page: 1, limit: 10 }).then((result) => {
setMembers(result.data);
});
}, [getMembers]);
return (
<ul>
{members.map((member) => (
<li key={member.id}>{member.user?.first_name}</li>
))}
</ul>
);
}
Leave Workspace
import { useActiveWorkspace } from "@wacht/tanstack-router";
function LeaveWorkspaceButton() {
const { leave } = useActiveWorkspace();
return (
<button onClick={() => leave()}>
Leave Workspace
</button>
);
}
Invite Member
import { useActiveWorkspace } from "@wacht/tanstack-router";
function InviteMember() {
const { inviteMember, activeWorkspace } = useActiveWorkspace();
const handleInvite = async (email: string) => {
const invitation = await inviteMember({
email,
workspaceRoleId: "workspace_role_id_123",
});
if (invitation) {
console.log("Invitation sent:", invitation.id);
}
};
return (
<button onClick={() => handleInvite("[email protected]")}>
Invite to {activeWorkspace?.name}
</button>
);
}
