react-select-async-paginate
Advanced tools
Wrapper above react-select that supports pagination on menu scroll
The react-select-async-paginate package is a React component that extends the functionality of react-select to support asynchronous loading and pagination of options. This is particularly useful for large datasets where loading all options at once would be inefficient.
Asynchronous Loading
This feature allows you to load options asynchronously from an API endpoint. The `loadOptions` function fetches data from the server based on the search query and the current page, enabling efficient data loading.
```jsx
import React from 'react';
import AsyncPaginate from 'react-select-async-paginate';
const loadOptions = async (searchQuery, loadedOptions, { page }) => {
const response = await fetch(`https://api.example.com/data?page=${page}&query=${searchQuery}`);
const responseJSON = await response.json();
return {
options: responseJSON.data,
hasMore: responseJSON.hasMore,
additional: {
page: page + 1,
},
};
};
const MyComponent = () => (
<AsyncPaginate
loadOptions={loadOptions}
additional={{ page: 1 }}
/>
);
export default MyComponent;
```Pagination
Pagination is built into the asynchronous loading feature. The `loadOptions` function handles pagination by keeping track of the current page and fetching the next set of options when needed.
```jsx
import React from 'react';
import AsyncPaginate from 'react-select-async-paginate';
const loadOptions = async (searchQuery, loadedOptions, { page }) => {
const response = await fetch(`https://api.example.com/data?page=${page}&query=${searchQuery}`);
const responseJSON = await response.json();
return {
options: responseJSON.data,
hasMore: responseJSON.hasMore,
additional: {
page: page + 1,
},
};
};
const MyComponent = () => (
<AsyncPaginate
loadOptions={loadOptions}
additional={{ page: 1 }}
/>
);
export default MyComponent;
```Custom Option Rendering
This feature allows you to customize how options are rendered in the dropdown. The `components` prop can be used to pass a custom option component, enabling you to display additional information or custom styles.
```jsx
import React from 'react';
import AsyncPaginate from 'react-select-async-paginate';
const loadOptions = async (searchQuery, loadedOptions, { page }) => {
const response = await fetch(`https://api.example.com/data?page=${page}&query=${searchQuery}`);
const responseJSON = await response.json();
return {
options: responseJSON.data,
hasMore: responseJSON.hasMore,
additional: {
page: page + 1,
},
};
};
const customOption = (props) => (
<div>
<img src={props.data.image} alt={props.data.label} />
<span>{props.data.label}</span>
</div>
);
const MyComponent = () => (
<AsyncPaginate
loadOptions={loadOptions}
additional={{ page: 1 }}
components={{ Option: customOption }}
/>
);
export default MyComponent;
```react-select is a flexible and beautiful Select Input control for ReactJS with multiselect, autocomplete, async and creatable support. While it supports asynchronous loading, it does not have built-in pagination support like react-select-async-paginate.
react-virtualized-select combines react-select and react-virtualized to handle large lists efficiently by rendering only the visible items. It does not support asynchronous loading out of the box but is optimized for performance with large datasets.
react-windowed-select is a fork of react-select that uses react-window for windowing large lists. It is similar to react-virtualized-select but uses a different underlying library for virtualization. It does not support asynchronous loading natively.
Wrapper above react-select that supports pagination on menu scroll.
| react-select | react-select-async-paginate |
|---|---|
| 5.x | 0.6.x, 0.7.x |
| 4.x | 0.5.x |
| 3.x | 0.5.x, 0.4.x, ^0.3.2 |
| 2.x | 0.3.x, 0.2.x |
| 1.x | 0.1.x |
npm install react-select react-select-async-paginate
or
yarn add react-select react-select-async-paginate
AsyncPaginate is an alternative of Async but supports loading page by page. It is wrapper above default react-select thus it accepts all props of default Select. And there are some new props:
Required. Async function that take next arguments:
additional from props, for next is additional from previous response for current search. null by default.It should return next object:
{
options: Array,
hasMore: boolean,
additional?: any,
}
It similar to loadOptions from Select.Async but there is some differences:
hasMore for detect end of options list for current search.Not required. Number. Debounce timeout for loadOptions calls. 0 by default.
Not required. Default additional for first request for every search.
Not required. Default additional for empty search if options or defaultOptions defined.
Not required. Function. By default new options will load only after scroll menu to bottom. Arguments:
Should return boolean.
Not required. Function. By default new loaded options are concat with previous. Arguments:
Should return new options.
Not required. Number. Time in milliseconds to retry a request after an error
Not required. Array. Works as 2nd argument of useEffect hook. When one of items changed, AsyncPaginate cleans all cached options.
Not required. Boolean. If false options will not load on menu opening.
Ref for take react-select instance.
import { AsyncPaginate } from 'react-select-async-paginate';
...
/*
* assuming the API returns something like this:
* const json = {
* results: [
* {
* value: 1,
* label: 'Audi',
* },
* {
* value: 2,
* label: 'Mercedes',
* },
* {
* value: 3,
* label: 'BMW',
* },
* ],
* has_more: true,
* };
*/
async function loadOptions(search, loadedOptions) {
const response = await fetch(`/awesome-api-url/?search=${search}&offset=${loadedOptions.length}`);
const responseJSON = await response.json();
return {
options: responseJSON.results,
hasMore: responseJSON.has_more,
};
}
<AsyncPaginate
value={value}
loadOptions={loadOptions}
onChange={setValue}
/>
import { AsyncPaginate } from 'react-select-async-paginate';
...
async function loadOptions(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,
},
};
}
<AsyncPaginate
value={value}
loadOptions={loadOptions}
onChange={setValue}
additional={{
page: 1,
}}
/>
You can use reduceGroupedOptions util to group options by label key.
import { AsyncPaginate, reduceGroupedOptions } from 'react-select-async-paginate';
/*
* assuming the API returns something like this:
* const json = {
* options: [
* label: 'Cars',
* options: [
* {
* value: 1,
* label: 'Audi',
* },
* {
* value: 2,
* label: 'Mercedes',
* },
* {
* value: 3,
* label: 'BMW',
* },
* ]
* ],
* hasMore: true,
* };
*/
...
<AsyncPaginate
{...otherProps}
reduceOptions={reduceGroupedOptions}
/>
You can use withAsyncPaginate HOC.
import { withAsyncPaginate } from 'react-select-async-paginate';
...
const CustomAsyncPaginate = withAsyncPaginate(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 { withAsyncPaginate } from 'react-select-async-paginate';
import type {
UseAsyncPaginateParams,
ComponentProps,
} from 'react-select-async-paginate';
type AsyncPaginateCreatableProps<
OptionType,
Group extends GroupBase<OptionType>,
Additional,
IsMulti extends boolean,
> =
& CreatableProps<OptionType, IsMulti, Group>
& UseAsyncPaginateParams<OptionType, Group, Additional>
& ComponentProps<OptionType, Group, IsMulti>;
type AsyncPaginateCreatableType = <
OptionType,
Group extends GroupBase<OptionType>,
Additional,
IsMulti extends boolean = false,
>(props: AsyncPaginateCreatableProps<OptionType, Group, Additional, IsMulti>) => ReactElement;
const AsyncPaginateCreatable = withAsyncPaginate(Creatable) as AsyncPaginateCreatableType;
Usage of replacing components is similar with react-select, but there is one difference. If you redefine MenuList you should wrap it with wrapMenuList for workaround of some internal bugs of react-select.
import { AsyncPaginate, wrapMenuList } from 'react-select-async-paginate';
...
const MenuList = wrapMenuList(CustomMenuList);
<AsyncPaginate
{...otherProps}
components={{
...otherComponents,
MenuList,
}}
/>
If you want construct own component that uses logic of react-select-async-paginate inside, you can use next hooks:
useAsyncPaginateuseAsyncPaginateBaseuseComponentsimport {
useAsyncPaginate,
useComponents,
} from 'react-select-async-paginate';
...
const CustomAsyncPaginateComponent = ({
options,
defaultOptions,
additional,
loadOptionsOnMenuOpen,
debounceTimeout,
filterOption,
reduceOptions,
shouldLoadMore,
components: defaultComponents,
value,
onChange,
}) => {
const asyncPaginateProps = useAsyncPaginate({
options,
defaultOptions,
additional,
loadOptionsOnMenuOpen,
debounceTimeout,
filterOption,
reduceOptions,
shouldLoadMore,
});
const components = useComponents(defaultComponents);
return (
<CustomSelect
{...asyncPaginateProps}
components={components}
value={value}
onChange={onChange}
/>
);
}
useComponents provides redefined MenuList component by default. If you want redefine it, you should also wrap in with wrapMenuList.
FAQs
Wrapper above react-select that supports pagination on menu scroll
We found that react-select-async-paginate demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.