react-select-fetch

react-select-fetch

Wrapper above react-select-async-paginate that loads options from specified url.

Sandbox examples

• Simple
• Manual control of input value and menu opening
• Initial options

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;