║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: useOrganization() description: Access and manage the currently active organization in your React application with Clerk's useOrganization() hook. search: rank: 1 sdk: chrome-extension, expo, nextjs, react, react-router, remix, tanstack-react-start

The useOrganization() hook retrieves attributes of the currently active organization.

Examples

Expand and paginate 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. By default, the memberships, invitations, membershipRequests, and domains attributes are not populated. You must pass true or an object with the desired properties to fetch and paginate the data.

// invitations.data will never be populated.
const { invitations } = useOrganization()

// Use default values to fetch invitations, such as initialPage = 1 and pageSize = 10
const { invitations } = useOrganization({
  invitations: true,
})

// Pass your own values to fetch invitations
const { invitations } = useOrganization({
  invitations: {
    pageSize: 20,
    initialPage: 2, // skips the first page
  },
})

// Aggregate pages in order to render an infinite list
const { invitations } = useOrganization({
  invitations: {
    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 memberships attribute will be populated with the first page of the organization's 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.

<If sdk="react"> ```jsx {{ filename: 'components/MemberList.tsx' }} import { useOrganization } from '@clerk/clerk-react'

export default function MemberList() { const { memberships } = useOrganization({ memberships: { infinite: true, // Append new data to the existing list keepPreviousData: true, // Persist the cached data until the new data has been fetched }, })

if (!memberships) {
  // Handle loading state
  return null
}

return (
  <div>
    <h2>Organization members</h2>
    <ul>
      {memberships.data?.map((membership) => (
        <li key={membership.id}>
          {membership.publicUserData?.firstName} {membership.publicUserData?.lastName} &lt;
          {membership.publicUserData?.identifier}&gt; :: {membership.role}
        </li>
      ))}
    </ul>

    <button
      disabled={!memberships.hasNextPage} // Disable the button if there are no more available pages to be fetched
      onClick={memberships.fetchNext}
    >
      Load more
    </button>
  </div>
)

}

</If>

<If sdk="nextjs">
```tsx {{ filename: 'app/users/page.tsx' }}
'use client'

import { useOrganization } from '@clerk/nextjs'

export default function MemberListPage() {
  const { memberships } = useOrganization({
    memberships: {
      infinite: true, // Append new data to the existing list
      keepPreviousData: true, // Persist the cached data until the new data has been fetched
    },
  })

  if (!memberships) {
    // Handle loading state
    return null
  }

  return (
    <div>
      <h2>Organization members</h2>
      <ul>
        {memberships.data?.map((membership) => (
          <li key={membership.id}>
            {membership.publicUserData?.firstName} {membership.publicUserData?.lastName} &lt;
            {membership.publicUserData?.identifier}&gt; :: {membership.role}
          </li>
        ))}
      </ul>

      <button
        disabled={!memberships.hasNextPage} // Disable the button if there are no more available pages to be fetched
        onClick={memberships.fetchNext}
      >
        Load more
      </button>
    </div>
  )
}

</If> <If sdk="react-router"> ```tsx {{ filename: 'app/routes/members.tsx' }} import { useOrganization } from '@clerk/react-router'

export default function MemberListPage() { const { memberships } = useOrganization({ memberships: { infinite: true, // Append new data to the existing list keepPreviousData: true, // Persist the cached data until the new data has been fetched }, })

if (!memberships) {
  // Handle loading state
  return null
}

return (
  <div>
    <h2>Organization members</h2>
    <ul>
      {memberships.data?.map((membership) => (
        <li key={membership.id}>
          {membership.publicUserData?.firstName} {membership.publicUserData?.lastName} &lt;
          {membership.publicUserData?.identifier}&gt; :: {membership.role}
        </li>
      ))}
    </ul>

    <button
      disabled={!memberships.hasNextPage} // Disable the button if there are no more available pages to be fetched
      onClick={memberships.fetchNext}
    >
      Load more
    </button>
  </div>
)

}

</If>

<If sdk="chrome-extension">
```jsx {{ filename: 'src/routes/members.tsx' }}
import { useOrganization } from '@clerk/chrome-extension'

export default function MemberListPage() {
  const { memberships } = useOrganization({
    memberships: {
      infinite: true, // Append new data to the existing list
      keepPreviousData: true, // Persist the cached data until the new data has been fetched
    },
  })

  if (!memberships) {
    // Handle loading state
    return null
  }

  return (
    <div>
      <h2>Organization members</h2>
      <ul>
        {memberships.data?.map((membership) => (
          <li key={membership.id}>
            {membership.publicUserData?.firstName} {membership.publicUserData?.lastName} &lt;
            {membership.publicUserData?.identifier}&gt; :: {membership.role}
          </li>
        ))}
      </ul>

      <button
        disabled={!memberships.hasNextPage} // Disable the button if there are no more available pages to be fetched
        onClick={memberships.fetchNext}
      >
        Load more
      </button>
    </div>
  )
}

</If> <If sdk="remix"> ```tsx {{ filename: 'app/routes/members.tsx' }} import { useOrganization } from '@clerk/remix'

export default function MemberListPage() { const { memberships } = useOrganization({ memberships: { infinite: true, // Append new data to the existing list keepPreviousData: true, // Persist the cached data until the new data has been fetched }, })

if (!memberships) {
  // Handle loading state
  return null
}

return (
  <div>
    <h2>Organization members</h2>
    <ul>
      {memberships.data?.map((membership) => (
        <li key={membership.id}>
          {membership.publicUserData?.firstName} {membership.publicUserData?.lastName} &lt;
          {membership.publicUserData?.identifier}&gt; :: {membership.role}
        </li>
      ))}
    </ul>

    <button
      disabled={!memberships.hasNextPage} // Disable the button if there are no more available pages to be fetched
      onClick={memberships.fetchNext}
    >
      Load more
    </button>
  </div>
)

}

</If>

<If sdk="tanstack-react-start">
```tsx {{ filename: 'app/routes/members.tsx' }}
import { useOrganization } from '@clerk/tanstack-react-start'
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/members')({
  component: MemberListPage,
})

function MemberListPage() {
  const { memberships } = useOrganization({
    memberships: {
      infinite: true, // Append new data to the existing list
      keepPreviousData: true, // Persist the cached data until the new data has been fetched
    },
  })

  if (!memberships) {
    // Handle loading state
    return null
  }

  return (
    <div>
      <h2>Organization members</h2>
      <ul>
        {memberships.data?.map((membership) => (
          <li key={membership.id}>
            {membership.publicUserData?.firstName} {membership.publicUserData?.lastName} &lt;
            {membership.publicUserData?.identifier}&gt; :: {membership.role}
          </li>
        ))}
      </ul>

      <button
        disabled={!memberships.hasNextPage} // Disable the button if there are no more available pages to be fetched
        onClick={memberships.fetchNext}
      >
        Load more
      </button>
    </div>
  )
}

</If> <If sdk="expo"> ```tsx {{ filename: 'screens/MemberList.tsx' }} import { useOrganization } from '@clerk/clerk-expo' import { Text, View, TouchableOpacity, ScrollView } from 'react-native'

export function MemberListScreen() { const { memberships } = useOrganization({ memberships: { infinite: true, // Append new data to the existing list keepPreviousData: true, // Persist the cached data until the new data has been fetched }, })

if (!memberships) {
  // Handle loading state
  return <Text>Loading...</Text>
}

return (
  <View>
    <Text>Organization members</Text>
    <ScrollView>
      {memberships.data?.map((membership) => (
        <View key={membership.id}>
          <Text>
            {membership.publicUserData?.firstName} {membership.publicUserData?.lastName} &lt;
            {membership.publicUserData?.identifier}&gt; :: {membership.role}
          </Text>
        </View>
      ))}
    </ScrollView>

    <TouchableOpacity
      disabled={!memberships.hasNextPage} // Disable the button if there are no more available pages to be fetched
      onPress={memberships.fetchNext}
    >
      <Text>Load more</Text>
    </TouchableOpacity>
  </View>
)

}

</If>

### Simple pagination

The following example demonstrates how to use the `fetchPrevious` and `fetchNext` helper functions to paginate through the data. The `memberships` attribute will be populated with the first page of the organization's memberships. 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 memberships.

Notice the difference between this example's pagination and the infinite pagination example above.

<If sdk="react">
```jsx {{ filename: 'components/MemberList.tsx' }}
import { useOrganization } from '@clerk/clerk-react'

export default function MemberList() {
  const { memberships } = useOrganization({
    memberships: {
      keepPreviousData: true, // Persist the cached data until the new data has been fetched
    },
  })

  if (!memberships) {
    // Handle loading state
    return null
  }

  return (
    <div>
      <h2>Organization members</h2>
      <ul>
        {memberships.data?.map((membership) => (
          <li key={membership.id}>
            {membership.publicUserData?.firstName} {membership.publicUserData?.lastName} &lt;
            {membership.publicUserData?.identifier}&gt; :: {membership.role}
          </li>
        ))}
      </ul>

      <button disabled={!memberships.hasPreviousPage} onClick={memberships.fetchPrevious}>
        Previous page
      </button>

      <button disabled={!memberships.hasNextPage} onClick={memberships.fetchNext}>
        Next page
      </button>
    </div>
  )
}

</If> <If sdk="nextjs"> ```tsx {{ filename: 'app/users/page.tsx' }} 'use client'

import { useOrganization } from '@clerk/nextjs'

export default function MemberListPage() { const { memberships } = useOrganization({ memberships: { keepPreviousData: true, // Persist the cached data until the new data has been fetched }, })

if (!memberships) {
  // Handle loading state
  return null
}

return (
  <div>
    <h2>Organization members</h2>
    <ul>
      {memberships.data?.map((membership) => (
        <li key={membership.id}>
          {membership.publicUserData?.firstName} {membership.publicUserData?.lastName} &lt;
          {membership.publicUserData?.identifier}&gt; :: {membership.role}
        </li>
      ))}
    </ul>

    <button disabled={!memberships.hasPreviousPage} onClick={memberships.fetchPrevious}>
      Previous page
    </button>

    <button disabled={!memberships.hasNextPage} onClick={memberships.fetchNext}>
      Next page
    </button>
  </div>
)

}

</If>

<If sdk="react-router">
```tsx {{ filename: 'app/routes/members-paginated.tsx' }}
import { useOrganization } from '@clerk/react-router'

export default function MemberListPage() {
  const { memberships } = useOrganization({
    memberships: {
      keepPreviousData: true, // Persist the cached data until the new data has been fetched
    },
  })

  if (!memberships) {
    // Handle loading state
    return null
  }

  return (
    <div>
      <h2>Organization members</h2>
      <ul>
        {memberships.data?.map((membership) => (
          <li key={membership.id}>
            {membership.publicUserData?.firstName} {membership.publicUserData?.lastName} &lt;
            {membership.publicUserData?.identifier}&gt; :: {membership.role}
          </li>
        ))}
      </ul>

      <button disabled={!memberships.hasPreviousPage} onClick={memberships.fetchPrevious}>
        Previous page
      </button>

      <button disabled={!memberships.hasNextPage} onClick={memberships.fetchNext}>
        Next page
      </button>
    </div>
  )
}

</If> <If sdk="chrome-extension"> ```jsx {{ filename: 'src/routes/members-paginated.tsx' }} import { useOrganization } from '@clerk/chrome-extension'

export default function MemberListPage() { const { memberships } = useOrganization({ memberships: { keepPreviousData: true, // Persist the cached data until the new data has been fetched }, })

if (!memberships) {
  // Handle loading state
  return null
}

return (
  <div>
    <h2>Organization members</h2>
    <ul>
      {memberships.data?.map((membership) => (
        <li key={membership.id}>
          {membership.publicUserData?.firstName} {membership.publicUserData?.lastName} &lt;
          {membership.publicUserData?.identifier}&gt; :: {membership.role}
        </li>
      ))}
    </ul>

    <button disabled={!memberships.hasPreviousPage} onClick={memberships.fetchPrevious}>
      Previous page
    </button>

    <button disabled={!memberships.hasNextPage} onClick={memberships.fetchNext}>
      Next page
    </button>
  </div>
)

}

</If>

<If sdk="remix">
```tsx {{ filename: 'app/routes/members-paginated.tsx' }}
import { useOrganization } from '@clerk/remix'

export default function MemberListPage() {
  const { memberships } = useOrganization({
    memberships: {
      keepPreviousData: true, // Persist the cached data until the new data has been fetched
    },
  })

  if (!memberships) {
    // Handle loading state
    return null
  }

  return (
    <div>
      <h2>Organization members</h2>
      <ul>
        {memberships.data?.map((membership) => (
          <li key={membership.id}>
            {membership.publicUserData?.firstName} {membership.publicUserData?.lastName} &lt;
            {membership.publicUserData?.identifier}&gt; :: {membership.role}
          </li>
        ))}
      </ul>

      <button disabled={!memberships.hasPreviousPage} onClick={memberships.fetchPrevious}>
        Previous page
      </button>

      <button disabled={!memberships.hasNextPage} onClick={memberships.fetchNext}>
        Next page
      </button>
    </div>
  )
}

</If> <If sdk="tanstack-react-start"> ```tsx {{ filename: 'app/routes/members-paginated.tsx' }} import { useOrganization } from '@clerk/tanstack-react-start' import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/members-paginated')({ component: MemberListPage, })

function MemberListPage() { const { memberships } = useOrganization({ memberships: { keepPreviousData: true, // Persist the cached data until the new data has been fetched }, })

if (!memberships) {
  // Handle loading state
  return null
}

return (
  <div>
    <h2>Organization members</h2>
    <ul>
      {memberships.data?.map((membership) => (
        <li key={membership.id}>
          {membership.publicUserData?.firstName} {membership.publicUserData?.lastName} &lt;
          {membership.publicUserData?.identifier}&gt; :: {membership.role}
        </li>
      ))}
    </ul>

    <button disabled={!memberships.hasPreviousPage} onClick={memberships.fetchPrevious}>
      Previous page
    </button>

    <button disabled={!memberships.hasNextPage} onClick={memberships.fetchNext}>
      Next page
    </button>
  </div>
)

}

</If>

<If sdk="expo">
```tsx {{ filename: 'screens/MemberList.tsx' }}
import { useOrganization } from '@clerk/clerk-expo'
import { Text, View, TouchableOpacity, ScrollView } from 'react-native'

export function MemberListScreen() {
  const { memberships } = useOrganization({
    memberships: {
      keepPreviousData: true, // Persist the cached data until the new data has been fetched
    },
  })

  if (!memberships) {
    // Handle loading state
    return <Text>Loading...</Text>
  }

  return (
    <View>
      <Text>Organization members</Text>
      <ScrollView>
        {memberships.data?.map((membership) => (
          <View key={membership.id}>
            <Text>
              {membership.publicUserData?.firstName} {membership.publicUserData?.lastName} &lt;
              {membership.publicUserData?.identifier}&gt; :: {membership.role}
            </Text>
          </View>
        ))}
      </ScrollView>

      <TouchableOpacity disabled={!memberships.hasPreviousPage} onPress={memberships.fetchPrevious}>
        <Text>Previous page</Text>
      </TouchableOpacity>

      <TouchableOpacity disabled={!memberships.hasNextPage} onPress={memberships.fetchNext}>
        <Text>Next page</Text>
      </TouchableOpacity>
    </View>
  )
}

</If>

Properties

useOrganization() accepts a single object with the following optional properties:

<Typedoc src="shared/use-organization-params" />

[!WARNING] By default, the memberships, invitations, membershipRequests, and domains attributes aren't populated. To fetch and paginate the data, you must pass true or an object with the desired properties.

Shared properties

Optional properties that are shared across the invitations, membershipRequests, memberships, and domains properties.

<Typedoc src="shared/pages-or-infinite-options" /> <Typedoc src="shared/paginated-hook-config" />

[!NOTE] 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.

Returns

<Typedoc src="shared/use-organization-return" />

PaginatedResources

<Typedoc src="shared/paginated-resources" />

To see the different organization features integrated into one application, take a look at our organizations demo repository.

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║