Desription

+ React hook: autosuggest
+ Support: fetchApi/basic
+ Single selection
---

Preview

!React-Autosuggest

Installation

Install via npm:
``
npm i react-autosuggest-z
`

Usage

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

$3


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

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

$3


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

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

$3


`js
import Autosuggest from 'react-autosuggest-z';

const fetchInfo = useFetchPlaceholder();

{...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([]);
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