platform-bible-react
    Preparing search index...

    Type Alias ScrollGroupSelectorProps

    type ScrollGroupSelectorProps = {
        availableScrollGroupIds: (ScrollGroupId | undefined)[];
        className?: string;
        id?: string;
        localizedStrings?: LanguageStrings;
        onChangeScrollGroupId: (
            newScrollGroupId: ScrollGroupId | undefined,
        ) => void;
        scrollGroupId: ScrollGroupId | undefined;
        size?: "default" | "sm" | "lg" | "icon";
    }
    Index

    Properties

    availableScrollGroupIds className? id? localizedStrings? onChangeScrollGroupId scrollGroupId size?

    Properties

    availableScrollGroupIds: (ScrollGroupId | undefined)[]

    List of scroll group ids to show to the user. Either a ScrollGroupId or undefined for no scroll group

    className?: string

    Additional css classes to help with unique styling

    id?: string

    Optional id for the select element

    localizedStrings?: LanguageStrings

    Localized strings to use for displaying scroll group ids. Must be an object whose keys are getLocalizeKeyForScrollGroupId(scrollGroupId) for all scroll group ids (and undefined if included) in ScrollGroupSelectorProps.availableScrollGroupIds and whose values are the localized strings to use for those scroll group ids.

    Defaults to English localizations of English alphabet for scroll groups 0-25 (e.g. 0 is A) and Ø for undefined. Will fill in any that are not provided with these English localizations. Also, if any values match the keys, the English localization will be used. This is useful in case you want to pass in a temporary version of the localized strings while your localized strings load.

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

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

    const localizeKeys = getLocalizeKeysForScrollGroupIds();

    const [localizedStrings] = useLocalizedStrings(localizeKeys);

    ...

    <ScrollGroupSelector localizedStrings={localizedStrings} />
    onChangeScrollGroupId: (newScrollGroupId: ScrollGroupId | undefined) => void

    Callback function run when the user tries to change the scroll group id

    scrollGroupId: ScrollGroupId | undefined

    Currently selected scroll group id. undefined for no scroll group

    size?: "default" | "sm" | "lg" | "icon"

    Size of the scroll group dropdown button. Defaults to 'sm'

    Settings

    Member Visibility

    On This Page

    Properties