Platform.Bible React

https://paranext.github.io/paranext-core/platform-bible-react/
Admin
A React component library and hooks that provide Platform.Bible extensions with consistent styling...
Tokens:1,533,915
Snippets:7,513
Trust Score:8.3
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install Dependencies

Source: https://paranext.github.io/paranext-core/platform-bible-react/index

Installs the necessary dependencies for the development environment.

```bash
npmi
```

--------------------------------

### Preview platform-bible-react Components

Source: https://paranext.github.io/paranext-core/platform-bible-react/index

Starts a development server to preview the components within the platform-bible-react library.

```bash
npm start
```

--------------------------------

### Using ScrollGroupSelector with Localized Strings

Source: https://paranext.github.io/paranext-core/platform-bible-react/types/ScrollGroupSelectorProps

This example shows how to use the ScrollGroupSelector component. It involves fetching available scroll group IDs, getting their corresponding localize keys, and then using a hook to get the localized strings before passing them to the component.

```javascript
const availableScrollGroupIds = [undefined, 0, 1, 2, 3, 4];

const localizeKeys = getLocalizeKeysForScrollGroupIds();

const [localizedStrings] = useLocalizedStrings(localizeKeys);

... 

<ScrollGroupSelector localizedStrings={localizedStrings}/>
```

--------------------------------

### Build platform-bible-react

Source: https://paranext.github.io/paranext-core/platform-bible-react/index

Builds the platform-bible-react library for production.

```bash
npm run build
```

--------------------------------

### usePromise Hook Example

Source: https://paranext.github.io/paranext-core/platform-bible-react/functions/usePromise

Illustrative example of how to use the usePromise hook in a React component to fetch data asynchronously.

```javascript
import React from 'react';
import { usePromise } from '@paranext/platform-bible-react';

interface User {
  id: number;
  name: string;
}

const fetchUser = async (userId: number): Promise<User> => {
  // Simulate API call
  await new Promise(resolve => setTimeout(resolve, 1000));
  return { id: userId, name: 'John Doe' };
};

const UserProfile: React.FC<{ userId: number }> = ({ userId }) => {
  const [user, isLoading] = usePromise(
    () => fetchUser(userId),
    { id: 0, name: 'Loading...' } // Default value
  );

  if (isLoading) {
    return <div>Loading user data...</div>;
  }

  return (
    <div>
      <h1>User Profile</h1>
      <p>ID: {user.id}</p>
      <p>Name: {user.name}</p>
    </div>
  );
};

export default UserProfile;
```

--------------------------------

### useListbox Hook Example

Source: https://paranext.github.io/paranext-core/platform-bible-react/functions/useListbox

Example usage of the useListbox hook in a React component to enable keyboard navigation for a listbox.

```javascript
import React from 'react';
import { useListbox } from '@paranext/platform-bible-react';

function MyListBox() {
  const { listboxRef, activeId, selectedId, handleKeyDown, focusOption } = useListbox({
    // ... pass UseListboxProps here
  });

  const options = [
    { id: 'option-1', label: 'Option 1' },
    { id: 'option-2', label: 'Option 2' },
    { id: 'option-3', label: 'Option 3' },
  ];

  return (
    <ul
      ref={listboxRef}
      tabIndex={0}
      onKeyDown={handleKeyDown}
      aria-activedescendant={activeId}
    >
      {options.map(option => (
        <li
          key={option.id}
          id={option.id}
          className={option.id === activeId ? 'active' : ''}
          onClick={() => focusOption(option.id)}
        >
          {option.label}
        </li>
      ))}
    </ul>
  );
}
```

--------------------------------

### Basic Build platform-bible-react

Source: https://paranext.github.io/paranext-core/platform-bible-react/index

Performs a quick build of the platform-bible-react library without linting. This should not be used before committing.

```bash
npm run build:basic
```

--------------------------------

### Build platform-bible-react (Monorepo)

Source: https://paranext.github.io/paranext-core/platform-bible-react/index

Builds the platform-bible-react library within a monorepo structure.

```bash
npm run build:platform-bible-react
```

--------------------------------

### Settings and Navigation Components

Source: https://paranext.github.io/paranext-core/platform-bible-react/modules

Components for building settings interfaces, including lists, sidebars, and search functionalities within navigation.

```react
import SettingsList from './SettingsList';
import SettingsListHeader from './SettingsListHeader';
import SettingsListItem from './SettingsListItem';
import SettingsSidebar from './SettingsSidebar';
import SettingsSidebarContentSearch from './SettingsSidebarContentSearch';
import NavigationContentSearch from './NavigationContentSearch';

// Example Usage:
<SettingsSidebar>
  <SettingsSidebarContentSearch />
  <SettingsList>
    <SettingsListHeader title="General" />
    <SettingsListItem label="Theme" />
  </SettingsList>
</SettingsSidebar>
<NavigationContentSearch />
```

--------------------------------

### Status Determination Utility

Source: https://paranext.github.io/paranext-core/platform-bible-react/modules

A utility function to get the status of an item, likely used in inventory or task management contexts.

```javascript
/**
 * getStatusForItem
 * Determines the status of a given item.
 * @param {*} item The item to check.
 * @returns {string} The status of the item.
 */
function getStatusForItem(item) {
  // Implementation details...
  return 'unknown';
}
```

--------------------------------

### Drawer Components

Source: https://paranext.github.io/paranext-core/platform-bible-react/modules

Provides a set of components for creating drawer-like UI elements. Includes content, description, overlay, portal, title, and trigger functionalities.

```javascript
import { DrawerContent } from '@paranext/core-platform-bible-react';
import { DrawerDescription } from '@paranext/core-platform-bible-react';
import { DrawerOverlay } from '@paranext/core-platform-bible-react';
import { DrawerPortal } from '@paranext/core-platform-bible-react';
import { DrawerTitle } from '@paranext/core-platform-bible-react';
import { DrawerTrigger } from '@paranext/core-platform-bible-react';

// Example Usage:
<DrawerTrigger>
  <button>Open Drawer</button>
</DrawerTrigger>
<DrawerPortal>
  <DrawerOverlay />
  <DrawerContent>
    <DrawerTitle>Drawer Title</DrawerTitle>
    <DrawerDescription>Drawer Content Description</DrawerDescription>
  </DrawerContent>
</DrawerPortal>
```

--------------------------------

### TextFieldProps Property: defaultValue

Source: https://paranext.github.io/paranext-core/platform-bible-react/types/TextFieldProps

The initial value for the text field if it is not a controlled component. This sets the starting content of the input.

```typescript
defaultValue?: string | number
```

--------------------------------

### Command Components

Source: https://paranext.github.io/paranext-core/platform-bible-react/index

Documentation for the Command component and its related components for creating command palettes or search interfaces.

```APIDOC
Command:
  Description: A component for creating command palettes, search interfaces, or select menus.
  Props:
    shouldFilter: Whether to filter items client-side (defaults to true).
    filterFunction: Custom function to filter items.
    label: Accessibility label for the command component.
    value: The current value of the command input.
    onValueChange: Callback when the command input value changes.
    defaultValue: The default value for the command input.
    placeholder: Placeholder text for the command input.

CommandEmpty:
  Description: Displays a message when no results are found in the Command component.
  Props:
    children: Content to display when no results are found.

CommandGroup:
  Description: Groups related items within the Command component.
  Props:
    heading: Optional heading for the command group.
    children: Command items belonging to this group.

CommandInput:
  Description: The input field for the Command component.
  Props:
    value: The current value of the input.
    onValueChange: Callback when the input value changes.
    placeholder: Placeholder text for the input.
    disabled: Whether the input is disabled.
    autoFocus: Whether the input should automatically focus on mount.
    runCommand: Function to execute when Enter is pressed.

CommandItem:
  Description: An individual selectable item within the Command component.
  Props:
    value: The unique value of the command item.
    onSelect: Callback function when the item is selected.
    disabled: Whether the item is disabled.
    keywords: Keywords to associate with the item for searching.
    children: Content of the command item.

CommandList:
  Description: Container for CommandItem components within the Command component.
  Props:
    children: Command items to display.
```

--------------------------------

### Enums

Source: https://paranext.github.io/paranext-core/platform-bible-react/types/Scope

Enumerations provided by the library for defining specific sets of named constants. Examples include BookSelectionMode for selecting books and DropdownMenuItemType for categorizing dropdown menu items.

```typescript
import { BookSelectionMode } from '@paranext/core-platform-bible-react';
import { DropdownMenuItemType } from '@paranext/core-platform-bible-react';

// Example usage of an enum:
let mode: BookSelectionMode = BookSelectionMode.Single;
let itemType: DropdownMenuItemType = DropdownMenuItemType.Normal;
```

--------------------------------

### Enums

Source: https://paranext.github.io/paranext-core/platform-bible-react/variables/buttonVariants

Enumerations provided by the library for defining specific sets of named constants. Examples include BookSelectionMode for selecting books and DropdownMenuItemType for categorizing dropdown menu items.

```typescript
import { BookSelectionMode } from '@paranext/core-platform-bible-react';
import { DropdownMenuItemType } from '@paranext/core-platform-bible-react';

// Example usage of an enum:
let mode: BookSelectionMode = BookSelectionMode.Single;
let itemType: DropdownMenuItemType = DropdownMenuItemType.Normal;
```

--------------------------------

### UI Components

Source: https://paranext.github.io/paranext-core/platform-bible-react/variables/Table

Documentation for various UI components available in the library, including their props and usage.

```APIDOC
TabToolbar:
  - A toolbar component for managing tabs.

TextField:
  - An input field component for text entry.

Toolbar:
  - A general-purpose toolbar component.

UiLanguageSelector:
  - A component for selecting the UI language.
```

--------------------------------

### Get Inventory Item Status

Source: https://paranext.github.io/paranext-core/platform-bible-react/interfaces/ListboxOption

A utility function to determine the status of an inventory item based on its current count and total available.

```typescript
import { getStatusForItem } from "@paranext/platform-bible-react";

const status = getStatusForItem({ count: 5, total: 10 });
console.log(status); // Example output: 'partial'

const statusFull = getStatusForItem({ count: 10, total: 10 });
console.log(statusFull); // Example output: 'full'
```

--------------------------------

### Global Styles for platform-bible-react

Source: https://paranext.github.io/paranext-core/platform-bible-react/index

Applies global styles to ensure the application matches the look and feel of platform-bible-react components.

```css
* {
  border-color: hsl(var(--border));
  outline-color: hsl(var(--ring) / 0.5);
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}
```

--------------------------------

### Enums

Source: https://paranext.github.io/paranext-core/platform-bible-react/types/DropdownMenuSubTriggerProps

Enumerations provided by the library for defining specific sets of named constants. Examples include BookSelectionMode for selecting books and DropdownMenuItemType for categorizing dropdown menu items.

```typescript
import { BookSelectionMode } from '@paranext/core-platform-bible-react';
import { DropdownMenuItemType } from '@paranext/core-platform-bible-react';

// Example usage of an enum:
let mode: BookSelectionMode = BookSelectionMode.Single;
let itemType: DropdownMenuItemType = DropdownMenuItemType.Normal;
```

--------------------------------

### UI Components

Source: https://paranext.github.io/paranext-core/platform-bible-react/variables/BOOK_SELECTOR_STRING_KEYS

Documentation for various UI components available in the library, including their props and usage.

```APIDOC
TabToolbar:
  - A toolbar component for managing tabs.

TextField:
  - An input field component for text entry.

Toolbar:
  - A general-purpose toolbar component.

UiLanguageSelector:
  - A component for selecting the UI language.
```

--------------------------------

### Drawer and Toolbar Components

Source: https://paranext.github.io/paranext-core/platform-bible-react/modules

Components for creating drawer-like interfaces and toolbars. Includes headers, footers, and general toolbar elements for navigation and actions.

```react
import Drawer from './Drawer';
import DrawerHeader from './DrawerHeader';
import DrawerFooter from './DrawerFooter';
import Toolbar from './Toolbar';
import TabToolbar from './TabToolbar';

// Example Usage:
<Drawer>
  <DrawerHeader title="My Drawer" />
  <Toolbar />
  <TabToolbar />
  <DrawerFooter />
</Drawer>
```

--------------------------------

### API Documentation for getStatusForItem

Source: https://paranext.github.io/paranext-core/platform-bible-react/functions/getStatusForItem

Gets the status for an item, typically used in the Inventory component. It checks if the item exists in the approved or unapproved lists to determine its status.

```APIDOC
getStatusForItem(item: string, approvedItems: string[], unapprovedItems: string[]): Status
  Parameters:
    item: string - The item for which the status is being requested
    approvedItems: string[] - Array of approved items, typically as defined in `Settings.xml`
    unapprovedItems: string[] - Array of unapproved items, typically as defined in `Settings.xml`
  Returns Status:
    The status for the specified item.
  Defined in lib/platform-bible-react/src/components/advanced/inventory/inventory-utils.ts:93
```

--------------------------------

### Enums

Source: https://paranext.github.io/paranext-core/platform-bible-react/variables/SidebarMenuSub

Enumerations provided by the library for defining specific sets of named constants. Examples include BookSelectionMode for selecting books and DropdownMenuItemType for categorizing dropdown menu items.

```typescript
import { BookSelectionMode } from '@paranext/core-platform-bible-react';
import { DropdownMenuItemType } from '@paranext/core-platform-bible-react';

// Example usage of an enum:
let mode: BookSelectionMode = BookSelectionMode.Single;
let itemType: DropdownMenuItemType = DropdownMenuItemType.Normal;
```

--------------------------------

### Dropdown Menu Components

Source: https://paranext.github.io/paranext-core/platform-bible-react/index

Documentation for the Dropdown Menu component and its sub-components for creating contextual menus.

```APIDOC
DropdownMenuCheckboxItem:
  Description: A checkbox item within a Dropdown Menu.
  Props:
    checked: Whether the checkbox item is checked.
    onCheckedChange: Callback when the checked state changes.
    disabled: Whether the item is disabled.
    inset: Whether the item has an inset.
    as: The element to render the item as (e.g., 'div').

DropdownMenuContent:
  Description: The content container for the Dropdown Menu.
  Props:
    sideOffset: Offset from the trigger element.
    align: Alignment of the dropdown menu (start, center, end).
    side: Side of the trigger to align the menu (top, bottom, left, right).
    as: The element to render the content as (e.g., 'div').

DropdownMenuGroup:
  Description: Groups related items within the Dropdown Menu.
  Props:
    as: The element to render the group as (e.g., 'div').

DropdownMenuItem:
  Description: An individual selectable item within the Dropdown Menu.
  Props:
    onSelect: Callback function when the item is selected.
    disabled: Whether the item is disabled.
    inset: Whether the item has an inset.
    as: The element to render the item as (e.g., 'div').

DropdownMenuLabel:
  Description: A label for a section within the Dropdown Menu.
  Props:
    inset: Whether the label has an inset.
    as: The element to render the label as (e.g., 'div').

DropdownMenuPortal:
  Description: Renders the Dropdown Menu content in a portal.
  Props:
    children: The Dropdown Menu components to be rendered in the portal.

DropdownMenuRadioGroup:
  Description: A group of radio items within the Dropdown Menu.
  Props:
    value: The currently selected radio value.
    onValueChange: Callback when the selected value changes.
    as: The element to render the group as (e.g., 'div').

DropdownMenuRadioItem:
  Description: A radio item within a Dropdown Menu.
  Props:
    value: The value of the radio item.
    disabled: Whether the item is disabled.
    inset: Whether the item has an inset.
    as: The element to render the item as (e.g., 'div').

DropdownMenuSeparator:
  Description: A separator line within the Dropdown Menu.
  Props:
    as: The element to render the separator as (e.g., 'div').

DropdownMenuSub:
  Description: Creates a submenu within the Dropdown Menu.
  Props:
    open: Whether the submenu is open.
    onOpenChange: Callback when the open state changes.
    children: Content of the submenu.

DropdownMenuSubContent:
  Description: The content container for a submenu.
  Props:
    sideOffset: Offset from the trigger element.
    align: Alignment of the submenu content.
    side: Side of the trigger to align the content.
    as: The element to render the content as (e.g., 'div').

DropdownMenuSubTrigger:
  Description: The trigger element for a submenu.
  Props:
    as: The element to render the trigger as (e.g., 'button').

DropdownMenuTrigger:
  Description: The trigger element to open the Dropdown Menu.
  Props:
    as: The element to render the trigger as (e.g., 'button').
```

--------------------------------

### UI Components

Source: https://paranext.github.io/paranext-core/platform-bible-react/functions/Drawer

Documentation for various UI components available in the library, including their props and usage.

```APIDOC
TabToolbar:
  - A toolbar component for managing tabs.

TextField:
  - An input field component for text entry.

Toolbar:
  - A general-purpose toolbar component.

UiLanguageSelector:
  - A component for selecting the UI language.
```

--------------------------------

### Enums

Source: https://paranext.github.io/paranext-core/platform-bible-react/variables/SidebarMenuItem

Enumerations provided by the library for defining specific sets of named constants. Examples include BookSelectionMode for selecting books and DropdownMenuItemType for categorizing dropdown menu items.

```typescript
import { BookSelectionMode } from '@paranext/core-platform-bible-react';
import { DropdownMenuItemType } from '@paranext/core-platform-bible-react';

// Example usage of an enum:
let mode: BookSelectionMode = BookSelectionMode.Single;
let itemType: DropdownMenuItemType = DropdownMenuItemType.Normal;
```

--------------------------------

### Enums

Source: https://paranext.github.io/paranext-core/platform-bible-react/variables/SidebarMenuButton

Enumerations provided by the library for defining specific sets of named constants. Examples include BookSelectionMode for selecting books and DropdownMenuItemType for categorizing dropdown menu items.

```typescript
import { BookSelectionMode } from '@paranext/core-platform-bible-react';
import { DropdownMenuItemType } from '@paranext/core-platform-bible-react';

// Example usage of an enum:
let mode: BookSelectionMode = BookSelectionMode.Single;
let itemType: DropdownMenuItemType = DropdownMenuItemType.Normal;
```

--------------------------------

### UI Components

Source: https://paranext.github.io/paranext-core/platform-bible-react/functions/DrawerFooter

Documentation for various UI components available in the library, including their props and usage.

```APIDOC
TabToolbar:
  - A toolbar component for managing tabs.

TextField:
  - An input field component for text entry.

Toolbar:
  - A general-purpose toolbar component.

UiLanguageSelector:
  - A component for selecting the UI language.
```

--------------------------------

### UI Components

Source: https://paranext.github.io/paranext-core/platform-bible-react/types/ComboBoxLabelOption

Documentation for various UI components available in the library, including their props and usage.

```APIDOC
TabToolbar:
  - A toolbar component for managing tabs.

TextField:
  - An input field component for text entry.

Toolbar:
  - A general-purpose toolbar component.

UiLanguageSelector:
  - A component for selecting the UI language.
```

--------------------------------

### Enums

Source: https://paranext.github.io/paranext-core/platform-bible-react/variables/SelectTrigger

Enumerations provided by the library for defining specific sets of named constants. Examples include BookSelectionMode for selecting books and DropdownMenuItemType for categorizing dropdown menu items.

```typescript
import { BookSelectionMode } from '@paranext/core-platform-bible-react';
import { DropdownMenuItemType } from '@paranext/core-platform-bible-react';

// Example usage of an enum:
let mode: BookSelectionMode = BookSelectionMode.Single;
let itemType: DropdownMenuItemType = DropdownMenuItemType.Normal;
```

--------------------------------

### UI Components

Source: https://paranext.github.io/paranext-core/platform-bible-react/variables/TooltipProvider

Documentation for various UI components available in the library, including their props and usage.

```APIDOC
TabToolbar:
  - A toolbar component for managing tabs.

TextField:
  - An input field component for text entry.

Toolbar:
  - A general-purpose toolbar component.

UiLanguageSelector:
  - A component for selecting the UI language.
```

--------------------------------

### Enums

Source: https://paranext.github.io/paranext-core/platform-bible-react/variables/SelectSeparator

Enumerations provided by the library for defining specific sets of named constants. Examples include BookSelectionMode for selecting books and DropdownMenuItemType for categorizing dropdown menu items.

```typescript
import { BookSelectionMode } from '@paranext/core-platform-bible-react';
import { DropdownMenuItemType } from '@paranext/core-platform-bible-react';

// Example usage of an enum:
let mode: BookSelectionMode = BookSelectionMode.Single;
let itemType: DropdownMenuItemType = DropdownMenuItemType.Normal;
```

--------------------------------

### Enums

Source: https://paranext.github.io/paranext-core/platform-bible-react/variables/SelectScrollDownButton

Enumerations provided by the library for defining specific sets of named constants. Examples include BookSelectionMode for selecting books and DropdownMenuItemType for categorizing dropdown menu items.

```typescript
import { BookSelectionMode } from '@paranext/core-platform-bible-react';
import { DropdownMenuItemType } from '@paranext/core-platform-bible-react';

// Example usage of an enum:
let mode: BookSelectionMode = BookSelectionMode.Single;
let itemType: DropdownMenuItemType = DropdownMenuItemType.Normal;
```

--------------------------------

### UI Components

Source: https://paranext.github.io/paranext-core/platform-bible-react/variables/SelectItem

Documentation for various UI components available in the library, including their props and usage.

```APIDOC
TabToolbar:
  - A toolbar component for managing tabs.

TextField:
  - An input field component for text entry.

Toolbar:
  - A general-purpose toolbar component.

UiLanguageSelector:
  - A component for selecting the UI language.
```

--------------------------------

### UI Components

Source: https://paranext.github.io/paranext-core/platform-bible-react/functions/inventoryItemColumn

Documentation for various UI components available in the library, including their props and usage.

```APIDOC
TabToolbar:
  - A toolbar component for managing tabs.

TextField:
  - An input field component for text entry.

Toolbar:
  - A general-purpose toolbar component.

UiLanguageSelector:
  - A component for selecting the UI language.
```

--------------------------------

### Enums

Source: https://paranext.github.io/paranext-core/platform-bible-react/variables/SelectLabel

Enumerations provided by the library for defining specific sets of named constants. Examples include BookSelectionMode for selecting books and DropdownMenuItemType for categorizing dropdown menu items.

```typescript
import { BookSelectionMode } from '@paranext/core-platform-bible-react';
import { DropdownMenuItemType } from '@paranext/core-platform-bible-react';

// Example usage of an enum:
let mode: BookSelectionMode = BookSelectionMode.Single;
let itemType: DropdownMenuItemType = DropdownMenuItemType.Normal;
```

--------------------------------

### Drawer Components

Source: https://paranext.github.io/paranext-core/platform-bible-react/index

Documentation for the Drawer component and its sub-components for creating slide-over panels.

```APIDOC
DrawerClose:
  Description: A trigger to close the Drawer.
  Props:
    as: The element to render the close trigger as (e.g., 'button').

DrawerContent:
  Description: The content of the Drawer panel.
  Props:
    as: The element to render the content as (e.g., 'div').
    children: The content to display inside the drawer.

DrawerDescription:
  Description: Displays a description within the Drawer.
  Props:
    as: The element to render the description as (e.g., 'p').

DrawerOverlay:
  Description: An overlay that appears behind the Drawer content.
  Props:
    as: The element to render the overlay as (e.g., 'div').

DrawerPortal:
  Description: Renders the Drawer content in a portal, typically to the body.
  Props:
    children: The Drawer components to be rendered in the portal.

DrawerTitle:
  Description: Displays the title within the Drawer.
  Props:
    as: The element to render the title as (e.g., 'h2').

DrawerTrigger:
  Description: A trigger element to open the Drawer.
  Props:
    as: The element to render the trigger as (e.g., 'button').
```

--------------------------------

### Enums

Source: https://paranext.github.io/paranext-core/platform-bible-react/variables/SelectContent

Enumerations provided by the library for defining specific sets of named constants. Examples include BookSelectionMode for selecting books and DropdownMenuItemType for categorizing dropdown menu items.

```typescript
import { BookSelectionMode } from '@paranext/core-platform-bible-react';
import { DropdownMenuItemType } from '@paranext/core-platform-bible-react';

// Example usage of an enum:
let mode: BookSelectionMode = BookSelectionMode.Single;
let itemType: DropdownMenuItemType = DropdownMenuItemType.Normal;
```

--------------------------------

### Enums

Source: https://paranext.github.io/paranext-core/platform-bible-react/variables/DropdownMenuRadioItem

Enumerations provided by the library for defining specific sets of named constants. Examples include BookSelectionMode for selecting books and DropdownMenuItemType for categorizing dropdown menu items.

```typescript
import { BookSelectionMode } from '@paranext/core-platform-bible-react';
import { DropdownMenuItemType } from '@paranext/core-platform-bible-react';

// Example usage of an enum:
let mode: BookSelectionMode = BookSelectionMode.Single;
let itemType: DropdownMenuItemType = DropdownMenuItemType.Normal;
```

--------------------------------

### UI Components

Source: https://paranext.github.io/paranext-core/platform-bible-react/variables/Select

Documentation for various UI components available in the library, including their props and usage.

```APIDOC
TabToolbar:
  - A toolbar component for managing tabs.

TextField:
  - An input field component for text entry.

Toolbar:
  - A general-purpose toolbar component.

UiLanguageSelector:
  - A component for selecting the UI language.
```

--------------------------------

### UI Components

Source: https://paranext.github.io/paranext-core/platform-bible-react/modules

This section details various UI components available in the library, including their purpose and potential usage.

```javascript
import { Sonner } from 'paranext-core/platform-bible-react';
import { TabDropdownMenu } from 'paranext-core/platform-bible-react';
import { TabToolbar } from 'paranext-core/platform-bible-react';
import { TextField } from 'paranext-core/platform-bible-react';
import { Toolbar } from 'paranext-core/platform-bible-react';
import { UiLanguageSelector } from 'paranext-core/platform-bible-react';
```

--------------------------------

### Enums

Source: https://paranext.github.io/paranext-core/platform-bible-react/variables/DropdownMenuPortal

Enumerations provided by the library for defining specific sets of named constants. Examples include BookSelectionMode for selecting books and DropdownMenuItemType for categorizing dropdown menu items.

```typescript
import { BookSelectionMode } from '@paranext/core-platform-bible-react';
import { DropdownMenuItemType } from '@paranext/core-platform-bible-react';

// Example usage of an enum:
let mode: BookSelectionMode = BookSelectionMode.Single;
let itemType: DropdownMenuItemType = DropdownMenuItemType.Normal;
```

--------------------------------

### Enums

Source: https://paranext.github.io/paranext-core/platform-bible-react/variables/DropdownMenuCheckboxItem

Enumerations provided by the library for defining specific sets of named constants. Examples include BookSelectionMode for selecting books and DropdownMenuItemType for categorizing dropdown menu items.

```typescript
import { BookSelectionMode } from '@paranext/core-platform-bible-react';
import { DropdownMenuItemType } from '@paranext/core-platform-bible-react';

// Example usage of an enum:
let mode: BookSelectionMode = BookSelectionMode.Single;
let itemType: DropdownMenuItemType = DropdownMenuItemType.Normal;
```

--------------------------------

### UI Components

Source: https://paranext.github.io/paranext-core/platform-bible-react/variables/CommandList

Documentation for various UI components available in the library, including their props and usage.

```APIDOC
TabToolbar:
  - A toolbar component for managing tabs.

TextField:
  - An input field component for text entry.

Toolbar:
  - A general-purpose toolbar component.

UiLanguageSelector:
  - A component for selecting the UI language.
```

--------------------------------

### Enums

Source: https://paranext.github.io/paranext-core/platform-bible-react/variables/DropdownMenuContent

Enumerations provided by the library for defining specific sets of named constants. Examples include BookSelectionMode for selecting books and DropdownMenuItemType for categorizing dropdown menu items.

```typescript
import { BookSelectionMode } from '@paranext/core-platform-bible-react';
import { DropdownMenuItemType } from '@paranext/core-platform-bible-react';

// Example usage of an enum:
let mode: BookSelectionMode = BookSelectionMode.Single;
let itemType: DropdownMenuItemType = DropdownMenuItemType.Normal;
```

--------------------------------

### UI Components

Source: https://paranext.github.io/paranext-core/platform-bible-react/index

This section details various UI components available for building interfaces within the Paranext platform. These components cover navigation, input fields, display elements, and more.

```javascript
import { SettingsListHeader } from '@paranext/core-platform-bible-react';
import { SettingsListItem } from '@paranext/core-platform-bible-react';
import { SettingsSidebar } from '@paranext/core-platform-bible-react';
import { SettingsSidebarContentSearch } from '@paranext/core-platform-bible-react';
import { Skeleton } from '@paranext/core-platform-bible-react';
import { Sonner } from '@paranext/core-platform-bible-react';
import { TabDropdownMenu } from '@paranext/core-platform-bible-react';
import { TabToolbar } from '@paranext/core-platform-bible-react';
import { TextField } from '@paranext/core-platform-bible-react';
import { Toolbar } from '@paranext/core-platform-bible-react';
import { UiLanguageSelector } from '@paranext/core-platform-bible-react';
```

--------------------------------

### Enums

Source: https://paranext.github.io/paranext-core/platform-bible-react/variables/DrawerTrigger

Enumerations provided by the library for defining specific sets of named constants. Examples include BookSelectionMode for selecting books and DropdownMenuItemType for categorizing dropdown menu items.

```typescript
import { BookSelectionMode } from '@paranext/core-platform-bible-react';
import { DropdownMenuItemType } from '@paranext/core-platform-bible-react';

// Example usage of an enum:
let mode: BookSelectionMode = BookSelectionMode.Single;
let itemType: DropdownMenuItemType = DropdownMenuItemType.Normal;
```

--------------------------------

### Utility and Feedback Components

Source: https://paranext.github.io/paranext-core/platform-bible-react/modules

Components for handling errors, displaying loading states (skeletons), and providing user feedback.

```react
import ErrorDump from './ErrorDump';
import ErrorPopover from './ErrorPopover';
import Skeleton from './Skeleton';
import Sonner from './Sonner'; // Assuming Sonner is a toast/notification component

// Example Usage:
<ErrorDump error={new Error('Something went wrong')} />
<ErrorPopover message="Invalid input" />
<Skeleton />
<Sonner message="Operation successful" />
```

--------------------------------

### Localized Strings for Scroll Group IDs

Source: https://paranext.github.io/paranext-core/platform-bible-react/types/ScrollGroupSelectorProps

This example demonstrates how to create localized strings for scroll group IDs using a helper function. It maps undefined and numeric IDs to specific localized keys.

```javascript
const myScrollGroupIdLocalizedStrings = {
  [getLocalizeKeyForScrollGroupId('undefined')]:'Ø',
  [getLocalizeKeyForScrollGroupId(0)]:'A',
  [getLocalizeKeyForScrollGroupId(1)]:'B',
  [getLocalizeKeyForScrollGroupId(2)]:'C',
  [getLocalizeKeyForScrollGroupId(3)]:'D',
  [getLocalizeKeyForScrollGroupId(4)]:'E',
};
```

--------------------------------

### Tooltip Components API Documentation

Source: https://paranext.github.io/paranext-core/platform-bible-react/variables/Table

API documentation for the Tooltip, TooltipContent, TooltipProvider, and TooltipTrigger components, used for displaying informative tooltips on hover or focus.

```APIDOC
Tooltip:
  A component that wraps content to provide tooltip functionality.

TooltipProvider:
  A provider component that manages tooltip state and configuration.
  Props:
    delayDuration?: number
      The delay in milliseconds before the tooltip appears.
    skipDelayDuration?: number
      The delay in milliseconds before the tooltip appears when skipping animations.

TooltipTrigger:
  A component that triggers the display of a tooltip.
  Props:
    asChild?: boolean
      If true, renders the Tooltip component as the trigger.

TooltipContent:
  A component that renders the content of the tooltip.
  Props:
    side?: "top" | "right" | "bottom" | "left"
      The side of the trigger to display the tooltip on.
    sideOffset?: number
      The offset in pixels from the side.
    align?: "start" | "center" | "end"
      The alignment of the tooltip content relative to the trigger.
```

--------------------------------

### Enums

Source: https://paranext.github.io/paranext-core/platform-bible-react/types/DropdownMenuSubContentProps

Enumerations provided by the library for defining specific sets of named constants. Examples include BookSelectionMode for selecting books and DropdownMenuItemType for categorizing dropdown menu items.

```typescript
import { BookSelectionMode } from '@paranext/core-platform-bible-react';
import { DropdownMenuItemType } from '@paranext/core-platform-bible-react';

// Example usage of an enum:
let mode: BookSelectionMode = BookSelectionMode.Single;
let itemType: DropdownMenuItemType = DropdownMenuItemType.Normal;
```

--------------------------------

### UI Components

Source: https://paranext.github.io/paranext-core/platform-bible-react/variables/Tooltip

Documentation for various UI components available in the library, including their props and usage.

```APIDOC
TabToolbar:
  - A toolbar component for managing tabs.

TextField:
  - An input field component for text entry.

Toolbar:
  - A general-purpose toolbar component.

UiLanguageSelector:
  - A component for selecting the UI language.
```

--------------------------------

### Enums

Source: https://paranext.github.io/paranext-core/platform-bible-react/types/DropdownMenuSeparatorProps

Enumerations provided by the library for defining specific sets of named constants. Examples include BookSelectionMode for selecting books and DropdownMenuItemType for categorizing dropdown menu items.

```typescript
import { BookSelectionMode } from '@paranext/core-platform-bible-react';
import { DropdownMenuItemType } from '@paranext/core-platform-bible-react';

// Example usage of an enum:
let mode: BookSelectionMode = BookSelectionMode.Single;
let itemType: DropdownMenuItemType = DropdownMenuItemType.Normal;
```

--------------------------------

### UI Components

Source: https://paranext.github.io/paranext-core/platform-bible-react/variables/DrawerOverlay

Documentation for various UI components available in the library, including their props and usage.

```APIDOC
TabToolbar:
  - A toolbar component for managing tabs.

TextField:
  - An input field component for text entry.

Toolbar:
  - A general-purpose toolbar component.

UiLanguageSelector:
  - A component for selecting the UI language.
```

--------------------------------

### Enums

Source: https://paranext.github.io/paranext-core/platform-bible-react/types/DropdownMenuProps

Enumerations provided by the library for defining specific sets of named constants. Examples include BookSelectionMode for selecting books and DropdownMenuItemType for categorizing dropdown menu items.

```typescript
import { BookSelectionMode } from '@paranext/core-platform-bible-react';
import { DropdownMenuItemType } from '@paranext/core-platform-bible-react';

// Example usage of an enum:
let mode: BookSelectionMode = BookSelectionMode.Single;
let itemType: DropdownMenuItemType = DropdownMenuItemType.Normal;
```

--------------------------------

### UI Components

Source: https://paranext.github.io/paranext-core/platform-bible-react/functions/inventoryCountColumn

Documentation for various UI components available in the library, including their props and usage.

```APIDOC
TabToolbar:
  - A toolbar component for managing tabs.

TextField:
  - An input field component for text entry.

Toolbar:
  - A general-purpose toolbar component.

UiLanguageSelector:
  - A component for selecting the UI language.
```

--------------------------------

### Enums

Source: https://paranext.github.io/paranext-core/platform-bible-react/types/DropdownMenuContentProps

Enumerations provided by the library for defining specific sets of named constants. Examples include BookSelectionMode for selecting books and DropdownMenuItemType for categorizing dropdown menu items.

```typescript
import { BookSelectionMode } from '@paranext/core-platform-bible-react';
import { DropdownMenuItemType } from '@paranext/core-platform-bible-react';

// Example usage of an enum:
let mode: BookSelectionMode = BookSelectionMode.Single;
let itemType: DropdownMenuItemType = DropdownMenuItemType.Normal;
```

--------------------------------

### CommandList Component Usage and Dependencies

Source: https://paranext.github.io/paranext-core/platform-bible-react/variables/CommandList

Provides information on how to use the CommandList component and its underlying technologies. It highlights dependencies on cmdk for command execution and Shadcn UI for styling, with links to their respective documentation.

```APIDOC
CommandList Component:
  Description: Command menu for React applications.
  Dependencies:
    - cmdk: For command execution functionality.
    - Shadcn UI: For component styling.
  Documentation:
    - Shadcn UI: https://ui.shadcn.com/docs/components/command
    - cmdk: https://cmdk.paco.me/
  Source File: lib/platform-bible-react/src/components/shadcn-ui/command.tsx:69
```

--------------------------------

### Inventory Status and Column Utilities

Source: https://paranext.github.io/paranext-core/platform-bible-react/types/InventoryItemOccurrence

Utility functions for handling inventory items and their statuses within the platform. Includes functions to get the status of an item and to define columns for displaying inventory data in tables.

```typescript
import { getStatusForItem, inventoryCountColumn, inventoryItemColumn, inventoryStatusColumn } from "@paranext/core/platform-bible-react";

// Example Usage:

interface InventoryItem {
  id: string;
  name: string;
  count: number;
  status: "available" | "out_of_stock";
}

const item: InventoryItem = { id: "item1", name: "Book", count: 5, status: "available" };

const itemStatus = getStatusForItem(item);
console.log("Item Status:", itemStatus); // Output: available

// Example of using column definitions for a data table:
const columns = [
  inventoryItemColumn,
  inventoryCountColumn,
  inventoryStatusColumn
];

console.log("Inventory Columns:", columns);
```

--------------------------------

### React Components for Bible Platform

Source: https://paranext.github.io/paranext-core/platform-bible-react/variables/TooltipProvider

This section lists various React components available in the platform-bible-react library. These components cover a wide range of UI functionalities, from navigation and data display to settings management and utility elements.

```react
BookChapterControl
BookSelector
ChapterRangeSelector
Checklist
cn
ComboBox
DataTable
Drawer
DrawerFooter
DrawerHeader
DropdownMenu
DropdownMenuShortcut
ErrorDump
ErrorPopover
Filter
FilterDropdown
Footer
Inventory
inventoryCountColumn
inventoryItemColumn
inventoryStatusColumn
MarkdownRenderer
MoreInfo
MultiSelectComboBox
NavigationContentSearch
ScopeSelector
ScriptureResultsViewer
ScrollGroupSelector
SettingsList
SettingsListHeader
SettingsListItem
SettingsSidebar
SettingsSidebarContentSearch
Skeleton
Sonner
TabDropdownMenu
```

--------------------------------

### Enums

Source: https://paranext.github.io/paranext-core/platform-bible-react/variables/Separator

Enumerations provided by the library for defining specific sets of named constants. Examples include BookSelectionMode for selecting books and DropdownMenuItemType for categorizing dropdown menu items.

```typescript
import { BookSelectionMode } from '@paranext/core-platform-bible-react';
import { DropdownMenuItemType } from '@paranext/core-platform-bible-react';

// Example usage of an enum:
let mode: BookSelectionMode = BookSelectionMode.Single;
let itemType: DropdownMenuItemType = DropdownMenuItemType.Normal;
```

--------------------------------

### Tooltip Components API Documentation

Source: https://paranext.github.io/paranext-core/platform-bible-react/functions/DrawerFooter

API documentation for the Tooltip, TooltipContent, TooltipProvider, and TooltipTrigger components, used for displaying informative tooltips on hover or focus.

```APIDOC
Tooltip:
  A component that wraps content to provide tooltip functionality.

TooltipProvider:
  A provider component that manages tooltip state and configuration.
  Props:
    delayDuration?: number
      The delay in milliseconds before the tooltip appears.
    skipDelayDuration?: number
      The delay in milliseconds before the tooltip appears when skipping animations.

TooltipTrigger:
  A component that triggers the display of a tooltip.
  Props:
    asChild?: boolean
      If true, renders the Tooltip component as the trigger.

TooltipContent:
  A component that renders the content of the tooltip.
  Props:
    side?: "top" | "right" | "bottom" | "left"
      The side of the trigger to display the tooltip on.
    sideOffset?: number
      The offset in pixels from the side.
    align?: "start" | "center" | "end"
      The alignment of the tooltip content relative to the trigger.
```

--------------------------------

### UI Components

Source: https://paranext.github.io/paranext-core/platform-bible-react/variables/CommandGroup

Documentation for various UI components available in the library, including their props and usage.

```APIDOC
TabToolbar:
  - A toolbar component for managing tabs.

TextField:
  - An input field component for text entry.

Toolbar:
  - A general-purpose toolbar component.

UiLanguageSelector:
  - A component for selecting the UI language.
```

--------------------------------

### Enums

Source: https://paranext.github.io/paranext-core/platform-bible-react/variables/Progress

Enumerations provided by the library for defining specific sets of named constants. Examples include BookSelectionMode for selecting books and DropdownMenuItemType for categorizing dropdown menu items.

```typescript
import { BookSelectionMode } from '@paranext/core-platform-bible-react';
import { DropdownMenuItemType } from '@paranext/core-platform-bible-react';

// Example usage of an enum:
let mode: BookSelectionMode = BookSelectionMode.Single;
let itemType: DropdownMenuItemType = DropdownMenuItemType.Normal;
```

--------------------------------

### UI Components

Source: https://paranext.github.io/paranext-core/platform-bible-react/variables/CommandInput

Documentation for various UI components available in the library, including their props and usage.

```APIDOC
TabToolbar:
  - A toolbar component for managing tabs.

TextField:
  - An input field component for text entry.

Toolbar:
  - A general-purpose toolbar component.

UiLanguageSelector:
  - A component for selecting the UI language.
```

--------------------------------

### Enums

Source: https://paranext.github.io/paranext-core/platform-bible-react/variables/Popover

Enumerations provided by the library for defining specific sets of named constants. Examples include BookSelectionMode for selecting books and DropdownMenuItemType for categorizing dropdown menu items.

```typescript
import { BookSelectionMode } from '@paranext/core-platform-bible-react';
import { DropdownMenuItemType } from '@paranext/core-platform-bible-react';

// Example usage of an enum:
let mode: BookSelectionMode = BookSelectionMode.Single;
let itemType: DropdownMenuItemType = DropdownMenuItemType.Normal;
```

--------------------------------

### Enums

Source: https://paranext.github.io/paranext-core/platform-bible-react/variables/Command

Enumerations provided by the library for defining specific sets of named constants. Examples include BookSelectionMode for selecting books and DropdownMenuItemType for categorizing dropdown menu items.

```typescript
import { BookSelectionMode } from '@paranext/core-platform-bible-react';
import { DropdownMenuItemType } from '@paranext/core-platform-bible-react';

// Example usage of an enum:
let mode: BookSelectionMode = BookSelectionMode.Single;
let itemType: DropdownMenuItemType = DropdownMenuItemType.Normal;
```

--------------------------------

### UI Components

Source: https://paranext.github.io/paranext-core/platform-bible-react/functions/DropdownMenu

Documentation for various UI components available in the library, including their props and usage.

```APIDOC
TabToolbar:
  - A toolbar component for managing tabs.

TextField:
  - An input field component for text entry.

Toolbar:
  - A general-purpose toolbar component.

UiLanguageSelector:
  - A component for selecting the UI language.
```
Tokens:
Raw