Wrapper above react-select-async-paginate
that loads options from specified url.
npm install react-select react-select-async-paginate react-select-fetch
or
yarn add react-select react-select-async-paginate react-select-fetch
Abstractions are wonderful but the most common task for async select is load list of options by specified url and query params. E.g.
// With SelectFetch
import { SelectFetch } from 'react-select-fetch';
...
<SelectFetch
value={value}
url="/awesome-api-url/"
mapResponse={(response) => ({
options: response.results,
hasMore: response.has_more,
})}
onChange={setValue}
/>
// Without SelectFetch
import { AsyncPaginate } from 'react-select-async-paginate';
...
<AsyncPaginate
value={value}
loadOptions={async (search, loadedOptions, { page }) => {
const response = await fetch(`/awesome-api-url/?search=${search}&page=${page}`);
const responseJSON = await response.json();
return {
options: responseJSON.results,
hasMore: responseJSON.has_more,
additional: {
page: page + 1,
},
};
}}
onChange={setValue}
additional={{
page: 1,
}}
/>
SelectFetch
receives props of react-select
and react-select-async-paginate
. And there are some new props:
Required. String.
Not required. Object. Object of permanent query params for requests.
Not required. String. Name of param that contains value of search input. "search"
by default.
Not required. String. Name of param that contains index of loaded page. Starts from 1
. "page"
by default.
Not required. String. Name of param that contains number of loaded optons. "offset"
by default.
Not required. Function. Mapper from server's response to format of react-select-async-paginate
. Arguments:
-
response
- response of server; -
payload
- object:
- `payload.search` - current search;
- `payload.prevPage` - page number before requrest;
- `payload.prevOptions` - options before request;
Not required. Page number for first request for every search. 1
by default.
Not required. Page number for first request for empty search if options
or defaultOptions
defined. 2
by default.
Not required. Async function. Arguments:
- url;
- object of query params;
Should return parsed response of server.
Example with axios
:
import axios from 'axios';
...
const get = async (url, params) => {
const response = await axios.get(url, {
params,
});
return response.data;
};
You can use withSelectFetch
HOC.
import { withSelectFetch } from 'react-select-fetch';
...
const CustomSelectFetch = withSelectFetch(CustomSelect);
Describing type of component with extra props (example with Creatable
):
import type { ReactElement } from 'react';
import type { GroupBase } from 'react-select';
import Creatable from 'react-select/creatable';
import type { CreatableProps } from 'react-select/creatable';
import type { ComponentProps } from 'react-select-async-paginate';
import { withSelectFetch } from 'react-select-fetch';
import type { UseSelectFetchParams } from 'react-select-fetch';
type SelectFetchCreatableProps<
OptionType,
Group extends GroupBase<OptionType>,
IsMulti extends boolean,
> =
& CreatableProps<OptionType, IsMulti, Group>
& UseSelectFetchParams<OptionType, Group>
& ComponentProps<OptionType, Group, IsMulti>;
type SelectFetchCreatableType = <
OptionType,
Group extends GroupBase<OptionType>,
IsMulti extends boolean = false,
>(props: SelectFetchCreatableProps<OptionType, Group, IsMulti>) => ReactElement;
const SelectFetchCreatable = withSelectFetch(Creatable) as SelectFetchCreatableType;