Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-select-async-paginate

Package Overview
Dependencies
Maintainers
1
Versions
47
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-select-async-paginate

Wrapper above react-select that supports pagination on menu scroll

  • 0.7.7
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
122K
increased by9.74%
Maintainers
1
Weekly downloads
 
Created

What is react-select-async-paginate?

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.

What are react-select-async-paginate's main functionalities?

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;
```

Other packages similar to react-select-async-paginate

Keywords

FAQs

Package last updated on 06 Dec 2024

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc