useOrganizationList()
The useOrganizationList()
hook provides access to the current user's organization memberships, invitations, and suggestions. It also includes methods for creating new organizations and managing the active organization.
Parameters
useOrganizationList()
accepts a single object with the following properties:
- Name
-
userInvitations?
- Type
true | { initialPage: number; pageSize: number; } & { status: "expired" | "revoked" | "pending" | "accepted"; } & { infinite: boolean; keepPreviousData: boolean; }
- Description
If set to
true
, all default properties will be used.
Otherwise, accepts an object with the following optional properties:status
: A string that filters the invitations by the provided status.- Any of the properties described in Shared properties.
- Name
-
userMemberships?
- Type
true | { initialPage: number; pageSize: number; } & object & { infinite: boolean; keepPreviousData: boolean; }
- Description
If set to
true
, all default properties will be used.
Otherwise, accepts an object with the following optional properties:- Any of the properties described in Shared properties.
- Name
-
userSuggestions?
- Type
true | { initialPage: number; pageSize: number; } & { status: "pending" | "accepted" | ("pending" | "accepted")[]; } & { infinite: boolean; keepPreviousData: boolean; }
- Description
If set to
true
, all default properties will be used.
Otherwise, accepts an object with the following optional properties:status
: A string that filters the suggestions by the provided status.- Any of the properties described in Shared properties.
Shared properties
Optional properties that are shared across the userMemberships
, userInvitations
, and userSuggestions
properties.
- Name
infinite?
- Type
boolean
- Description
If
true
, newly fetched data will be appended to the existing list rather than replacing it. Useful for implementing infinite scroll functionality. Defaults tofalse
.
- Name
keepPreviousData?
- Type
boolean
- Description
If
true
, the previous data will be kept in the cache until new data is fetched. Defaults tofalse
.
- Name
-
createOrganization
- Type
undefined | (CreateOrganizationParams) => Promise<OrganizationResource>
- Description
A function that returns a
Promise
which resolves to the newly createdOrganization
.
- Name
-
setActive
- Type
undefined | (setActiveParams) => Promise<void>
- Description
A function that sets the active session and/or organization.
- Name
-
userInvitations
- Type
PaginatedResourcesWithDefault<UserOrganizationInvitationResource> | PaginatedResources<UserOrganizationInvitationResource, T["userInvitations"] extends { infinite: true; } ? true : false>
- Description
Returns
PaginatedResources
which includes a list of the user's organization invitations.
- Name
-
userMemberships
- Type
PaginatedResourcesWithDefault<OrganizationMembershipResource> | PaginatedResources<OrganizationMembershipResource, T["userMemberships"] extends { infinite: true; } ? true : false>
- Description
Returns
PaginatedResources
which includes a list of the user's organization memberships.
- Name
-
userSuggestions
- Type
PaginatedResourcesWithDefault<OrganizationSuggestionResource> | PaginatedResources<OrganizationSuggestionResource, T["userSuggestions"] extends { infinite: true; } ? true : false>
- Description
Returns
PaginatedResources
which includes a list of suggestions for organizations that the user can join.
- Name
-
data
- Type
T[]
- Description
An array that contains the fetched data. For example, for the
memberships
attribute, data will be an array ofOrganizationMembership
objects.
- Name
-
setData
- Type
Infinite
extendstrue
?CacheSetter
<(undefined | ClerkPaginatedResponse<T>)[]
> :CacheSetter
<undefined | ClerkPaginatedResponse<T>
>- Description
A function that allows you to set the data manually.
Examples
Expanding and paginating attributes
To keep network usage to a minimum, developers are required to opt-in by specifying which resource they need to fetch and paginate through. So by default, the userMemberships
, userInvitations
, and userSuggestions
attributes are not populated. You must pass true
or an object with the desired properties to fetch and paginate the data.
// userMemberships.data will never be populated
const { userMemberships } = useOrganizationList()
// Use default values to fetch userMemberships, such as initialPage = 1 and pageSize = 10
const { userMemberships } = useOrganizationList({
userMemberships: true,
})
// Pass your own values to fetch userMemberships
const { userMemberships } = useOrganizationList({
userMemberships: {
pageSize: 20,
initialPage: 2, // skips the first page
},
})
// Aggregate pages in order to render an infinite list
const { userMemberships } = useOrganizationList({
userMemberships: {
infinite: true,
},
})
Infinite pagination
The following example demonstrates how to use the infinite
property to fetch and append new data to the existing list. The userMemberships
attribute will be populated with the first page of the user's organization memberships. When the "Load more" button is clicked, the fetchNext
helper function will be called to append the next page of memberships to the list.
import { useOrganizationList } from '@clerk/clerk-react'
import React from 'react'
const JoinedOrganizations = () => {
const { isLoaded, setActive, userMemberships } = useOrganizationList({
userMemberships: {
infinite: true,
},
})
if (!isLoaded) {
return <>Loading</>
}
return (
<>
<ul>
{userMemberships.data?.map((mem) => (
<li key={mem.id}>
<span>{mem.organization.name}</span>
<button onClick={() => setActive({ organization: mem.organization.id })}>Select</button>
</li>
))}
</ul>
<button disabled={!userMemberships.hasNextPage} onClick={() => userMemberships.fetchNext()}>
Load more
</button>
</>
)
}
export default JoinedOrganizations
'use client'
import { useOrganizationList } from '@clerk/nextjs'
export const JoinedOrganizations = () => {
const { isLoaded, setActive, userMemberships } = useOrganizationList({
userMemberships: {
infinite: true,
},
})
if (!isLoaded) {
return <>Loading</>
}
return (
<>
<ul>
{userMemberships.data?.map((mem) => (
<li key={mem.id}>
<span>{mem.organization.name}</span>
<button onClick={() => setActive({ organization: mem.organization.id })}>Select</button>
</li>
))}
</ul>
<button disabled={!userMemberships.hasNextPage} onClick={() => userMemberships.fetchNext()}>
Load more
</button>
</>
)
}
Simple pagination
The following example demonstrates how to use the fetchPrevious
and fetchNext
helper functions to paginate through the data. The userInvitations
attribute will be populated with the first page of invitations. When the "Previous page" or "Next page" button is clicked, the fetchPrevious
or fetchNext
helper function will be called to fetch the previous or next page of invitations.
Notice the difference between this example's pagination and the infinite pagination example above.
import { useOrganizationList } from '@clerk/clerk-react'
import React from 'react'
const UserInvitationsTable = () => {
const { isLoaded, userInvitations } = useOrganizationList({
userInvitations: {
infinite: true,
keepPreviousData: true,
},
})
if (!isLoaded || userInvitations.isLoading) {
return <>Loading</>
}
return (
<>
<table>
<thead>
<tr>
<th>Email</th>
<th>Org name</th>
</tr>
</thead>
<tbody>
{userInvitations.data?.map((inv) => (
<tr key={inv.id}>
<th>{inv.emailAddress}</th>
<th>{inv.publicOrganizationData.name}</th>
</tr>
))}
</tbody>
</table>
<button disabled={!userInvitations.hasPreviousPage} onClick={userInvitations.fetchPrevious}>
Prev
</button>
<button disabled={!userInvitations.hasNextPage} onClick={userInvitations.fetchNext}>
Next
</button>
</>
)
}
export default UserInvitationsTable
'use client'
import { useOrganizationList } from '@clerk/nextjs'
export const UserInvitationsTable = () => {
const { isLoaded, userInvitations } = useOrganizationList({
userInvitations: {
infinite: true,
keepPreviousData: true,
},
})
if (!isLoaded || userInvitations.isLoading) {
return <>Loading</>
}
return (
<>
<table>
<thead>
<tr>
<th>Email</th>
<th>Org name</th>
</tr>
</thead>
<tbody>
{userInvitations.data?.map((inv) => (
<tr key={inv.id}>
<th>{inv.emailAddress}</th>
<th>{inv.publicOrganizationData.name}</th>
</tr>
))}
</tbody>
</table>
<button disabled={!userInvitations.hasPreviousPage} onClick={userInvitations.fetchPrevious}>
Prev
</button>
<button disabled={!userInvitations.hasNextPage} onClick={userInvitations.fetchNext}>
Next
</button>
</>
)
}
To see the different organization features integrated into one application, take a look at our organizations demo repository.
Feedback
Last updated on