<OrganizationSwitcher>

The <OrganizationSwitcher> component is used to switch between organizations the user is a member of in your application.

Usage

import { OrganizationSwitcher } from "@slashid/react"

export default function Home() {
  return <OrganizationSwitcher />
}

By default all of the users organizations and suborganizations will be shown regardless of any suborganization tree hierarchy. For greater control see the filter prop.

With filtering

import { OrganizationSwitcher } from "@slashid/react"

// hide any org prefixed with "private_"
export default function Home() {
  return (
    <OrganizationSwitcher
      filter={(org) => !org.org_name.startsWith("private_")}
    />
  )
}

With rendered organization name overriding

import { OrganizationSwitcher } from "@slashid/react"

// renders "ORG_NAME (TENANT_NAME)"
export default function Home() {
  return (
    <OrganizationSwitcher
      renderLabel={(org) => `${org.name} (${org.tenant_name})`}
    />
  )
}

Props

name	type	default	description
fallback?	React.ReactNode	<Dropdown disabled />	The content shown while organizations are being fetched
filter?	(organization: OrganizationDetails) => boolean		A predicate function to filter the available organizations
renderLabel?	(organization: OrganizationDetails) => string	(org) => org.org_name	A render function called for each item in the menu

Interface: OrganizationDetails

interface OrganizationDetails {
  id: string;
  org_name: string;
  tenant_name: string;
  managed_organizations?: Organization[];
}

Property	Type	Description
id	string	The organizations id
org_name	string	The organizations name
tenant_name	string	The name of the tenant of this organization
managed_organizations?	Organization[]	A list of child organizations