Skip to Content
Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.com

<OrganizationSwitcher /> component

Organization Switcher Example

The <OrganizationSwitcher /> component is used to enable the ability to switch between available organizations the user may be part of in your application.

mountOrganizationSwitcher()

Render the <OrganizationSwitcher /> component to an HTML <div> element.

Usage

import Clerk from '@clerk/clerk-js'; import { dark } from "@clerk/themes"; document.querySelector<HTMLDivElement>('#app')!.innerHTML = ` <div id="organization-switcher" ></div> `; const organizationSwitcherComponent = document.querySelector<HTMLDivElement>('#organization-switcher')!; const clerk = new Clerk('pk_[publishable_key]'); await clerk.load(); clerk.mountOrganizationSwitcher(organizationSwitcherComponent, { appearance: { baseTheme: dark } });
<div id="organization-switcher"></div> <script> const script = document.createElement('script'); script.setAttribute('data-clerk-publishable-key', 'pk_[publishable_key]'); script.async = true; script.src = `https://[your-domain].clerk.accounts.dev/npm/@clerk/clerk-js@latest/dist/clerk.browser.js`; script.addEventListener('load', async function () { await window.Clerk.load(); const organizationSwitcherComponent = document.querySelector('#organization-switcher'); window.Clerk.mountOrganizationSwitcher(organizationSwitcherComponent, { appearance: { baseTheme: dark } }); }); document.body.appendChild(script); </script>

Properties

function mountOrganizationSwitcher(node: HTMLDivElement, props?: OrganizationSwitcherProps): void;
NameTypeDescription
nodeHTMLDivElement(opens in a new tab)The <div> element used to render in the <OrganizationSwitcher /> component
props?OrganizationSwitcherPropsThe properties to pass to the <OrganizationSwitcher /> component

unmountOrganizationSwitcher()

Unmount and run cleanup on an existing <OrganizationSwitcher /> component instance.

Usage

import Clerk from '@clerk/clerk-js'; document.querySelector<HTMLDivElement>('#app')!.innerHTML = ` <div id="organization-switcher" ></div> ` const organizationSwitcherComponent = document.querySelector<HTMLDivElement>('#organization-switcher')!; const clerk = new Clerk('pk_[publishable_key]'); await clerk.load(); clerk.mountOrganizationSwitcher(organizationSwitcherComponent); // ... clerk.unmountOrganizationSwitcher(organizationSwitcherComponent);
<div id="organization-switcher"></div> <script> const script = document.createElement('script'); script.setAttribute('data-clerk-publishable-key', 'pk_[publishable_key]'); script.async = true; script.src = `https://[your-domain].clerk.accounts.dev/npm/@clerk/clerk-js@latest/dist/clerk.browser.js`; script.addEventListener('load', async function () { await window.Clerk.load(); const organizationSwitcherComponent = document.querySelector('#organization-switcher'); window.Clerk.mountOrganizationSwitcher(organizationSwitcherComponent); // ... window.Clerk.unmountOrganizationSwitcher(organizationSwitcherComponent); }); document.body.appendChild(script); </script>

Properties

function unmountOrganizationSwitcher(node: HTMLDivElement): void;
NameTypeDescription
nodeHTMLDivElement(opens in a new tab)The container <div> element with a rendered <OrganizationSwitcher /> component instance

OrganizationSwitcherProps

All props below are optional.

NameTypeDescription
afterCreateOrganizationUrlstringFull URL or path to navigate after creating a new organization.
appearanceAppearance | undefinedOptional object to style your components. Will only affect Clerk Components and not Account Portal pages.
createOrganizationUrlstringFull URL or path where the <CreateOrganization />component is mounted.
organizationProfileUrlstringFull URL or path where the <OrganizationProfile /> component is mounted.
createOrganizationMode'modal' | 'navigation'Controls whether clicking the Create organization button will cause the <CreateOrganization /> component to open as a modal, or if the browser will navigate to the createOrganizationUrl where <CreateOrganization /> is mounted as a page.
Defaults to: 'modal'
organizationProfileMode'modal' | 'navigation'Controls whether clicking the Manage organization button will cause the <OrganizationProfile /> component to open as a modal, or if the browser will navigate to the organizationProfileUrl where <OrganizationProfile /> is mounted as a page.
Defaults to: 'modal'
afterLeaveOrganizationUrlstringFull URL or path to navigate to after the user leaves the currently active organization.
afterSwitchOrganizationUrlstringFull URL or path to navigate after a successful organization switch.
hidePersonalbooleanBy default, users can switch between organization and their personal account. This option controls whether <OrganizationSwitcher /> will include the user's personal account in the organization list. Setting this to false will hide the personal account entry, and users will only be able to switch between organizations.
Defaults to: true
defaultOpenbooleanControls the default state of the <OrganizationSwitcher /> component.
organizationProfilePropsobjectSpecify options for the underlying <OrganizationProfile /> component.
e.g. {appearance: {...}}

Last updated on January 8, 2024

What did you think of this content?

Clerk © 2024