react-select-fetch
v0.5.5
Published
Wrapper above react-select-async-paginate that loads options from specified url
Downloads
4,388
Maintainers
Readme
react-select-fetch
Wrapper above react-select-async-paginate
that loads options from specified url.
Sandbox examples
Installation
npm install react-select react-select-async-paginate react-select-fetch
or
yarn add react-select react-select-async-paginate react-select-fetch
Motivation
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,
}}
/>
Props
SelectFetch
receives props of react-select
and react-select-async-paginate
. And there are some new props:
url
Required. String.
queryParams
Not required. Object. Object of permanent query params for requests.
searchParamName
Not required. String. Name of param that contains value of search input. "search"
by default.
pageParamName
Not required. String. Name of param that contains index of loaded page. Starts from 1
. "page"
by default.
offsetParamName
Not required. String. Name of param that contains number of loaded optons. "offset"
by default.
mapResponse
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;
initialPage
Not required. Page number for first request for every search. 1
by default.
defaultInitialPage
Not required. Page number for first request for empty search if options
or defaultOptions
defined. 2
by default.
get
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;
};
Replacing react-select component
You can use withSelectFetch
HOC.
import { withSelectFetch } from 'react-select-fetch';
...
const CustomSelectFetch = withSelectFetch(CustomSelect);
typescript
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;