The useActiveOrganization() hook provides access to the currently active organization and its management methods.
Import
import { useActiveOrganization } from '@snipextt/wacht';
Usage
import { useActiveOrganization } from '@snipextt/wacht';
function ActiveOrgDashboard() {
const {
activeOrganization,
loading,
getMembers,
inviteMember,
updateOrganization
} = useActiveOrganization();
if (loading) {
return <div>Loading...</div>;
}
if (!activeOrganization) {
return <div>No active organization</div>;
}
return (
<div>
<h1>{activeOrganization.name}</h1>
<button onClick={async () => {
const members = await getMembers();
console.log('Members:', members);
}}>
View Members
</button>
</div>
);
}
Properties
The currently active organization object. null if no organization is active.
Whether the active organization is being loaded
Methods
updateOrganization()
Updates the active organization’s details.
const { updateOrganization } = useActiveOrganization();
await updateOrganization({
name: 'New Organization Name',
description: 'Updated description',
image: newImageFile
});
getMembers()
Retrieves members of the active organization.
const { getMembers } = useActiveOrganization();
const members = await getMembers();
getRoles()
Retrieves available roles in the active organization.
const { getRoles } = useActiveOrganization();
const roles = await getRoles();
removeMember()
Removes a member from the active organization.
const { removeMember } = useActiveOrganization();
await removeMember(memberObject);
removeRole()
Removes a role from the active organization.
const { removeRole } = useActiveOrganization();
await removeRole(roleObject);
getInvitations()
Retrieves pending invitations for the active organization.
const { getInvitations } = useActiveOrganization();
const invitations = await getInvitations();
inviteMember()
Invites a new member to the active organization.
const { inviteMember } = useActiveOrganization();
const invitation = await inviteMember({
email: '[email protected]',
organizationRole: roleObject,
workspace: workspaceObject, // optional
workspaceRole: workspaceRoleObject // optional
});
discardInvitation()
Cancels a pending invitation.
const { discardInvitation } = useActiveOrganization();
await discardInvitation(invitationObject);
resendInvitation()
Resends an invitation email.
const { resendInvitation } = useActiveOrganization();
await resendInvitation(invitationObject);
Domain Management
const {
getDomains,
addDomain,
verifyDomain,
removeDomain
} = useActiveOrganization();
// Get domains
const domains = await getDomains();
// Add domain
const domain = await addDomain({
fqdn: 'example.com'
});
// Verify domain
await verifyDomain(domainObject);
// Remove domain
await removeDomain(domainObject);
Member Role Management
const {
addMemberRole,
removeMemberRole
} = useActiveOrganization();
// Add role to member
await addMemberRole(memberObject, roleObject);
// Remove role from member
await removeMemberRole(memberObject, roleObject);
leave()
Leave the current active organization.
const { leave } = useActiveOrganization();
await leave();
refetch()
Manually refreshes the active organization data.
const { refetch } = useActiveOrganization();
await refetch();
Example: Organization Management Panel
function OrganizationPanel() {
const {
activeOrganization,
loading,
getMembers,
getRoles,
inviteMember,
updateOrganization
} = useActiveOrganization();
const [members, setMembers] = useState([]);
const [roles, setRoles] = useState([]);
const [showInviteForm, setShowInviteForm] = useState(false);
useEffect(() => {
if (activeOrganization) {
loadOrganizationData();
}
}, [activeOrganization]);
const loadOrganizationData = async () => {
const [memberData, roleData] = await Promise.all([
getMembers(),
getRoles()
]);
setMembers(memberData);
setRoles(roleData);
};
const handleInvite = async (email, roleId) => {
const role = roles.find(r => r.id === roleId);
if (role) {
await inviteMember({
email,
organizationRole: role
});
await loadOrganizationData();
}
};
if (loading || !activeOrganization) {
return <div>Loading...</div>;
}
return (
<div>
<header>
<h1>{activeOrganization.name}</h1>
<p>{activeOrganization.description}</p>
</header>
<section>
<h2>Members ({members.length})</h2>
<button onClick={() => setShowInviteForm(true)}>
Invite Member
</button>
<div className="member-list">
{members.map(member => (
<div key={member.id} className="member-item">
<span>{member.user.email}</span>
<span>{member.role.name}</span>
</div>
))}
</div>
</section>
{showInviteForm && (
<InviteForm
roles={roles}
onInvite={handleInvite}
onClose={() => setShowInviteForm(false)}
/>
)}
</div>
);
}
Notes
- The active organization is determined by the current session context
- All methods operate on the currently active organization
- Methods will return
undefined if no organization is active
- Organization switching is handled through
useSession().switchOrganization()
- Changes to the active organization automatically update the UI