Desription

• React hook: autosuggest
• Support: fetchApi/basic
• Single selection

Preview

Installation

Install via npm:

npm i react-autosuggest-z

Usage

To use react-autosuggest-z in your react project.

basic: object

    import 'react-autosuggest-z/build/styles.css';
    import Autosuggest from 'react-autosuggest-z';

    <Autocomplete
        listSuggest={[
            {
                name: 'abcd',
                value: '1234',
            },
            {
                name: 'abce',
                value: '1235',
            },
            {
                name: 'abcf',
                value: '1235',
            },
        ]}
        displayName={'name'}
        valueName={'value'}
    />

basic: array

    import 'react-autosuggest-z/build/styles.css';
    import Autosuggest from 'react-autosuggest-z';

    <Autocomplete
        listSuggest={[0, 1, 2, 3, 4, 5, 6]}
    />

async

    import Autosuggest from 'react-autosuggest-z';

    const fetchInfo = useFetchPlaceholder();

    <Autosuggest
        {...fetchInfo}
    />

    // hook file
    // sample with search data
    import { useCallback, useState } from 'react';
    import _ from 'lodash';

    const minSizeSearch = 4;
    export const useFetchPlaceholder = () => {
        const [listData, setListData] = useState<any[]>([]);
        const [isLoading, setLoading] = useState(false);
        const [value, setValue] = useState('');

        // sample
        const fetchingData = () => {
            setListData([]);

            fetch('https://jsonplaceholder.typicode.com/users')
            .then(response => response.json())
            .then(json => {
                setListData(json.filter(item => itme.abc.includes(value)));
                setLoading(false);
            })
            .catch(() => {
                setListData([]);
                setLoading(false);
            });
        };

        const searchUsers = useCallback(
            _.debounce(() => fetchingData(), 1000),
            [value],
        );

        return {
            listSuggest: listData,
            isLoading,
            placeholder: 'Please enter the name',
            hasAsync: true,
            displayName: 'name',
            valueName: 'id',
            minSizeSearch,
            setText: (newValue: string) => {
                setValue(newValue);
                if (newValue.trim().length < minSizeSearch) {
                    setListData([]);
                    setLoading(false);
                    return;
                }

                if (newValue.trim() !== value.trim()) {
                    setLoading(true);
                    searchUsers(newValue);
                }
            },
            handleSelection: (item: any) => {
                // setListData([]);
                // cancel request in hear....
                setLoading(false);
            },
            handleOutSideClick: () => {
                // cancel request in hear....
                setLoading(false);
            },
            handleIconSearchClick: () => {
                // cancel request in hear....
                setLoading(true);
                fetchingData();
            },
        };
    };

Props

• see index.d.ts
• version: testing

| props | type | description / default | |------------------------------|---------------------------------------|----------------------------------------------------------------------------| | id? | string | | | displayName? | string | | | valueName? | string | | | className? | string | | | listSuggest? | array | IObjectProps[] / any[] | | placeholder? | string | Please enter the name | | messageNoData? | string | Search for messages without data | | maxLength? | number | | | text? | string | | | closeOnSelected? | boolean | true | | closeOnEsc? | boolean | false | | matchCompareCase? | boolean | true: ignoreCase if search basic | | disabled? | boolean | | | minSizeSearch? | number | min character search with api (1) | | hideSearchIcon? | boolean | false | | titleSearchIcon? | string | tip-icon | | titleClearIcon? | string | tip-icon | | getInputRefs? | Function | (ref: React.MutableRefObject) => any: searchBox | | // async | | | | isLoading? | boolean | false: loading api | | hasAsync? | boolean | false: set true if use api | | setText? | Function | (value: string) => any | | handleSelection? | Function | (item: any) => any | | handleOutSideClick? | Function | () => any | | handleIconSearchClick? | Function | () => any |

License

MIT