Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.devGet API keys

useOrganization

Access attributes of the currently active organization.

Overview

The useOrganization hook gives you access to the current active organization attributes.

const useOrganizationParams = {
invitationList: { limit, offset }, // Pagination params
membershipList: { limit, offset } // Pagination params
};
const {
isLoaded,
organization,
invitationList,
membershipList,
membership,
} = useOrganization(useOrganizationParams);

These attributes are updating automatically and will re-render their respective components whenever you set a different organization using the setActive({ organization }) method or update any of the memberships or invitations. No need for you to manage updating anything manually.

Expanding invitationList and/or membershipList

To keep network usage to a minimum but to also provide a smooth auto-updating experience to developers, we made the invitationList and membershipList attributes being available only when their respective parameters are present when calling the hook.

E.g.

const { invitationList } = useOrganization();
// invitationList is undefined.
const { invitationList } = useOrganization({
invitationList: {} // Add any pagination params you might need.
});
// invitationList is retrieved and auto-updating as expected.

Usage

Make sure you've followed the installation guide for Clerk React before running the snippets below.

In the following example, useOrganization is used to map over the membershipList of the current active organization and present membership attributes.


Note that your component must be a descendant of <ClerkProvider/>.

Showing organization list information
import { useOrganization } from "@clerk/nextjs";
export default function MemberList() {
const { membershipList, membership } = useOrganization({
membershipList: {},
});
if (!membershipList) {
// loading state
return null;
}
return (
<div>
<h2>Organization members</h2>
<ul>
{membershipList.map((membership) => (
<li key={membership.id}>
{membership.publicUserData.firstName} {membership.publicUserData.lastName} &lt;
{membership.publicUserData.identifier}&gt; :: {membership.role}
</li>
))}
</ul>
</div>
);
}

Was this helpful?

Clerk © 2022