use-item-list/dist/index.d.ts

Manage indexed collections in React using hooks.

/// <reference types="react" />
export declare type ItemOptions = {
    /** Used to scroll item into view when highlighted. */
    ref: any;
    /** Value passed back in useItemList onSelect. */
    value: any;
    /** Prevents item from being highlighted/selected */
    disabled?: boolean;
    /** Used for highlightItemByString function */
    text?: string;
};
export declare type ItemListOptions = {
    /** Unique identifier for item list. */
    id?: number | string;
    /** Highlighted index on initial render. */
    initialHighlightedIndex?: number;
    /** Callback when an item has been highlighted. */
    onHighlight?: (item: any, index: number) => void;
    /** Callback when an item has been selected. */
    onSelect?: (item: any, index: number) => void;
    /** Controls the currently selected items. */
    selected?: (itemValue: any) => boolean | string;
};
export declare function useItemList({ id, initialHighlightedIndex, onHighlight, onSelect, selected, }?: ItemListOptions): {
    controllerId: string;
    listId: string;
    items: import("react").MutableRefObject<any[]>;
    getHighlightedIndex: () => number;
    getHighlightedItem: () => any;
    setHighlightedItem: (index: any) => void;
    moveHighlightedItem: (amount: any, { contain }?: {
        contain?: boolean;
    }) => void;
    clearHighlightedItem: () => void;
    selectHighlightedItem: () => void;
    useHighlightedItemId: () => any;
    highlightItemByString: (event: any, delay?: number) => void;
    useItem: ({ ref, text, value, disabled }: ItemOptions) => {
        id: string;
        index: number;
        highlight: () => void;
        select: () => void;
        selected: any;
        useHighlighted: () => Boolean;
    };
};