Combobox

The Combobox (autocomplete) control provides your component a value from a set of options selectable in the Makeswift builder. The options can be retrieved asynchronously (i.e., the result of an API call).

AnchorExamples

AnchorSpaceX rocket

In this example we register a SpaceXRocket component with its rocket prop controlled by a Combobox component which gets its options from the open-source SpaceX REST API.

Note that the getOptions function must return an array—or a promise of an array—of options. Each option must have the fields id, label, and value.

import { ReactRuntime } from '@makeswift/runtime/react'
import { Combobox } from '@makeswift/runtime/controls'

function SpaceXRocket({ rocket }) {
  if (rocket == null) return <p>Select a rocket.</p>

  return (
    <article>
      <h2>{rocket.name}</h2>
      <p>{rocket.description}</p>
      {rocket.flickr_images.map(image => (
        <img alt={rocket.name} key={image} src={image} />
      ))}
    </article>
  )
}

ReactRuntime.registerComponent(SpaceXRocket, {
  type: 'spacex-rocket',
  label: 'SpaceX Rocket',
  props: {
    rocket: Combobox({
      label: 'SpaceX rocket',
      async getOptions(query) {
        const response = await fetch(`https://api.spacexdata.com/v4/rockets`)
        const rockets = await response.json()

        return rockets
          .map(rocket => ({ id: rocket.id, label: rocket.name, value: rocket }))
          .filter(option => option.label.toLowerCase().includes(query.toLowerCase()))
      },
    }),
  },
})

AnchorAPI

AnchorParameters

AnchorProvided value

The Combobox control provides a value to your component—or undefined if there's no value set. The value provided is the same one in the value field of the selected option from getOptions.

AnchorTypes

type ComboboxControlOption<T> = { id: string; label: string; value: T }