AsyncSelect

For making one selection from a large list of options and fetching new options as the user types.

loadOptions


(inputValue) => fetch("https://restcountries.eu/rest/v2/name/" + inputValue)
    .then(data => data.json())
    .then(results => results.map(({ name }) => {
      return ({
        label: name,
        value: name
      })
    }));


(inputValue) => fetch("https://restcountries.eu/rest/v2/name/" + inputValue)
    .then(data => data.json())
    .then(results => results.map(({ name }) => {
      return ({
        label: name,
        value: name
      })
    }));

labelText

Country

Country

defaultOptions

cacheOptions

import * as React from "react";
import { AsyncSelect } from "@nulogy/components";

export default () => {
  return (
    <AsyncSelect
      loadOptions={inputValue =>
        fetch(
          "https://restcountries.eu/rest/v2/name/" +
            inputValue
        )
          .then(data => data.json())
          .then(results =>
            results.map(({ name }) => {
              return { label: name, value: name };
            })
          )
      }
      labelText="Country"
    />
  );
}

import * as React from "react";
import { AsyncSelect } from "@nulogy/components";

export default () => {
  return (
    <AsyncSelect
      loadOptions={inputValue =>
        fetch(
          "https://restcountries.eu/rest/v2/name/" +
            inputValue
        )
          .then(data => data.json())
          .then(results =>
            results.map(({ name }) => {
              return { label: name, value: name };
            })
          )
      }
      labelText="Country"
    />
  );
}

Props

All variations and props from the Select component are also available.

Name	Type	Description
loadOptions	function	Visible message.
labelText	react node	Visible message.
defaultOptions	boolean	if true will fetch results when the input is focussed and display them, otherwise you can pass in a list of label and value objects to display until the user types
cacheOptions	boolean	If cacheOptions is truthy, then the loaded data will be cached. The cache will remain until cacheOptions changes value.

Related Components

Select