> ## 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

# 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 `<TenantSelector />` 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](https://thenile.dev/docs/auth/components/customization.md).

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](https://thenile.dev/docs/auth/concepts/users.md)
* [Tenants](https://thenile.dev/docs/auth/concepts/tenants.md)
* [User Component](https://thenile.dev/docs/auth/components/user.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.