OrganizationList

List organisation memberships and pending invitations with org switching.

The <OrganizationList> component displays the user's organisation memberships and pending invitations. Users can switch active organisations and optionally create new ones.

Installation

pnpm add @wocha/ui @wocha/react

Or scaffold with the CLI

npx @wocha/cli init --framework nextjs

import { OrganizationList } from "@wocha/ui";
import "@wocha/ui/styles.css";

Basic usage

<OrganizationList
  showCreateButton
  onCreateClick={() => router.push("/organisations/new")}
  afterSelectUrl="/dashboard"
/>

Props

Prop	Type	Default	Description
`appearance`	`WochaAppearance`	—	Visual customisation
`className`	`string`	—	Additional class name
`showCreateButton`	`boolean`	`false`	Show a "Create organisation" button in the header
`onCreateClick`	`() => void`	—	Called when the create button is clicked
`afterSelectUrl`	`string`	—	Redirect URL after switching organisation

Theming

<WochaThemeProvider appearance={{ variables: { "--wocha-color-primary": "#6366f1" } }}>
  <OrganizationList showCreateButton />
</WochaThemeProvider>

Framework notes

Requires apiUrl and an authenticated session. Fetches data from GET /v1/organisations.