Skip to Content
Clerk logo

Clerk Docs

Ctrl + K
Go to clerkstage.dev

Organization switching

The useOrganizationList() hook returns the organizationList property, which is useful for viewing all the organizations the current user is a member of and also for building an organization switcher component.

Usage

This example shows how you can build an organization switcher in a Next.js application.

components/OrganizationSwitcher.js
import { useOrganization, useOrganizationList } from '@clerk/nextjs'; import Select from 'react-select'; function createOrganizationOptions(organizationList) { return organizationList.map(({ organization }) => ({ value: organization.id, label: organization.name })); } export default function Switcher() { const { setActive, organizationList, isLoaded } = useOrganizationList(); const { organization } = useOrganization(); if (!isLoaded) { return null; } const handleOrgChange = e => { setActive({ organization: e.value }); }; if (!organization) { return null; } return ( <Select options={createOrganizationOptions(organizationList)} onChange={handleOrgChange} value={{ value: organization.id, label: organization.name }} /> ); }

What did you think of this content?

Clerk © 2024