React-Select-Async-Example-Api.js

import React from 'react';
import AsyncSelect from 'react-select/async';

export default function PageComponent() {
  const mapResponseToValuesAndLabels = (data) => ({
    value: data.id,
    label: data.name,
  });

  async function callApi(value) {
    const data = await fetch(`https://jsonplaceholder.typicode.com/users`)
      .then((response) => response.json())
      .then((response) => response.map(mapResponseToValuesAndLabels))
      .then((final) =>
        final.filter((i) => i.label.toLowerCase().includes(value.toLowerCase()))
      );

    return data;
  }

  return (
    <div>
      <p>Exemplo de Async Select com api</p>
      <AsyncSelect
        cacheOptions
        loadOptions={callApi}
        onInputChange={(data) => {
          console.log(data);
        }}
        onChange={(data) => {
          console.log(data);
        }}
        defaultOptions
      />
    </div>
  );
}