> ## Documentation Index
> Fetch the complete documentation index at: https://thenile.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Organization

> Learn how to use the Nile Auth Organization component

export const component_0 = "<TenantSelector />"

# Tenant Selector

The `TenantSelector` component provides an interactive way to manage and switch between tenant organizations within an application. It leverages React Query for fetching tenant data and includes functionality to create new tenants.

***

## Features

* **Tenant Selection**: Users can switch between available tenants using a dropdown.
* **Tenant Creation**: If no tenants exist, users can create a new organization.
* **Persistent Selection**: Selected tenants persist via cookies.
* **Server Communication**: Fetches tenant data from an API endpoint.

***

## Installation

Ensure you have the necessary dependencies installed:

```sh theme={null}
npm install @niledatabase/react
```

***

## Usage

```tsx theme={null}
import TenantSelector from '@niledatabase/react';

export default function App() {
  return <TenantSelector />;
}
```

***

#### Props

| Name        | Type          | Default | Description                       |
| ----------- | ------------- | ------- | --------------------------------- |
| `client`    | `QueryClient` | `null`  | React Query client instance.      |
| `baseUrl`   | `string`      | `''`    | Base API URL for tenant requests. |
| `className` | `string`      | `''`    | Additional CSS classes.           |

***

### `useTenants`

A hook to fetch tenant data.

```ts theme={null}
const { data: tenants, isLoading, refetch } = useTenants();
```

Returns:

* `tenants`: List of available tenants.
* `isLoading`: Whether data is loading.
* `refetch()`: Function to refresh data.

***

### `useTenantId`

A hook for managing the currently selected tenant.

```ts theme={null}
const [tenantId, setTenant] = useTenantId();
```

Returns:

* `tenantId`: The currently selected tenant ID.
* `setTenant(id: string)`: Function to change the active tenant.

***

### `CreateTenant`

A component for creating a new organization.

```tsx theme={null}
<CreateTenant
  onSuccess={(tenant) => console.log('Created:', tenant)}
  trigger={<button>Create Tenant</button>}
/>
```

#### Props

| Name        | Type                       | Description                       |
| ----------- | -------------------------- | --------------------------------- |
| `trigger`   | `React.ReactElement`       | Element to trigger modal.         |
| `onSuccess` | `(tenant: Tenant) => void` | Callback when tenant is created.  |
| `onError`   | `(error: Error) => void`   | Callback when creation fails.     |
| `fetchUrl`  | `string`                   | API endpoint for tenant creation. |

***

## Behavior

1. **Tenant Selection**: Users can select an existing tenant from a dropdown.
2. **Tenant Creation**: If no tenant exists, users can create one.
3. **Persistent State**: Selected tenant is saved via cookies.
4. **Automatic Data Fetching**: Tenant data is fetched on component mount.

***

## Example UI

* If the user has tenants, they can switch between them.
* If the user has no tenants, they are prompted to create one.
* Clicking "Create Tenant" opens a form to enter an organization name.

## Theming

The <code>{component_0}</code> component is styled using tailwind. It can be customized using the `className` and `buttonText` props,
or using Tailwind CSS theme variables. You can find more details and full examples in the [customization doc](/auth/components/customization).

In addition, the hooks documented for each component can be used if you'd like to use Nile Auth with your own components.
If needed, you can peek at the [source code of the component](https://github.com/niledatabase/nile-js/tree/main/packages/react/src) and use it as a template to create your own component for maximum customization.

## Related Topics

* [User Management](/auth/concepts/users)
* [Tenants](/auth/concepts/tenants)
* [User Component](/auth/components/user)