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
Parameter | Type | Required | Default | Description |
---|---|---|---|---|
label | string | no | 'Text' | Text for the panel label. |
getOptions | (query: string) => ComboboxControlOption[] | Promise<ComboboxControlOption[]> | yes | N/A | A function that receives a query string and returns an array of options for the user. |
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 }