RD Pennell
Senior Support Engineer at Sanity.io
RD is located at Richmond, CA
Asynchronous List Options Component
Populate your list options in a string schema using an external API
schema.js
{
name: 'catBreed',
title: 'Cat Breed',
type: 'string',
options: {
list: [],
url: 'https://catfact.ninja/breeds',
formatResponse: (json) =>
json.data.map(({breed}) => ({
title: breed,
value: breed.toLowerCase().split(' ').join('-'),
})),
},
components: {
input: AsyncSelect,
},
},AsyncSelect.js
import {useState, useEffect} from 'react'
const AsyncSelect = (props) => {
const [listItems, setListItems] = useState([])
const {schemaType, renderDefault} = props
const {options} = schemaType
const {url, formatResponse} = options
useEffect(() => {
const getCats = async () =>
fetch(url)
.then((res) => res.json())
.then(formatResponse)
.then(setListItems)
getCats()
}, [url, formatResponse])
return renderDefault({
...props,
schemaType: {...schemaType, options: {...options, list: listItems}},
})
}
export default AsyncSelect
The Studio will break if you try to use an API call to populate your list options. Instead, you can use a custom input component and the renderDefault method to handle this in just a few lines of code.
Contributor
Other schemas by author
V3 version of Display an array of references as a checklist
This will allow you to display an array of references as a checklist from which you can multi-select.
Filter Array Options Based on the Current User Role
Use the renderDefault function to easily control your available array options.
RD Pennell