react-searchbox-like-youtube/index.d.ts

Customizable Searchbox with autocomplete and highlighted results for React applications.

import React from 'react';

interface ISvg {
    size?: string
}

interface ISearchResult {
    id: number
    title: string
    href?: string
}
interface IOnClickData extends ISearchResult {}
interface ISearchBoxProps {
    onChange: (onChangeData: string) => void
    onClick: (onClickData: IOnClickData) => void
    onSearch: (onSearchData: string | ISearchResult) => void
    results: ISearchResult[] | undefined
    placeholder?: string
    nightMode?: boolean
    sx?: {
        lightBg?: string
        darkBg?: string
    }
}

interface ISearchBoxContext extends Pick<ISearchBoxProps,
    'results' | 'onChange' | 'onClick' | 'sx' | 'nightMode' | 'onSearch' | 'placeholder'
    > {
    refs: {
        main: React.RefObject<HTMLDivElement>
        input: React.RefObject<HTMLInputElement>
        result: React.RefObject<HTMLDivElement>
        respBg: React.RefObject<HTMLDivElement>
        inputSearchIcon: React.RefObject<HTMLDivElement>
        clearButton: React.RefObject<HTMLButtonElement>
        dummyInput: React.RefObject<HTMLDivElement>
        respSbButton: React.RefObject<HTMLButtonElement>
    }
    setShowSB: React.Dispatch<React.SetStateAction<boolean>>
    showSB: boolean
    filteredResults: ISearchResult[]
    setFilteredResults: React.Dispatch<React.SetStateAction<ISearchResult[]>>
    value: string
    setValue: React.Dispatch<React.SetStateAction<string>>
    tempVal: string
    setTempVal: React.Dispatch<React.SetStateAction<string>>
    showLeftSearchSvg: boolean
    setShowLeftSearchSvg: React.Dispatch<React.SetStateAction<boolean>>
    showDummyInput: boolean
    setShowDummyInput: React.Dispatch<React.SetStateAction<boolean>>
    lightBg: string
    darkBg: string
    arr: ISearchResult[] | undefined
    setArr: React.Dispatch<React.SetStateAction<ISearchResult[] | undefined>>
    active: number
    setActive: React.Dispatch<React.SetStateAction<number>>
}

interface ISearchBoxProvider {
    children: React.ReactNode
}

declare const SearchBox: React.FC<ISearchBoxProps>
export { IOnClickData, ISearchBoxContext, ISearchBoxProps, ISearchBoxProvider, ISearchResult, ISvg }
export default SearchBox