​
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: 
npm install @niledatabase/react

​
Usage

import TenantSelector from '@niledatabase/react';

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

​
Props

NameTypeDefaultDescription
clientQueryClientnullReact Query client instance.
baseUrlstring''Base API URL for tenant requests.
classNamestring''Additional CSS classes.

​
useTenants

A hook to fetch tenant data. 
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. 
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. 
<CreateTenant
  onSuccess={(tenant) => console.log('Created:', tenant)}
  trigger={<button>Create Tenant</button>}
/>

​
Props

NameTypeDescription
triggerReact.ReactElementElement to trigger modal.
onSuccess(tenant: Tenant) => voidCallback when tenant is created.
onError(error: Error) => voidCallback when creation fails.
fetchUrlstringAPI 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 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. 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 and use it as a template to create your own component for maximum customization.