Simple Github repo selector for Sanity Studio

githubSelector.js

import GithubSelector from './GithubSelector.js'

export default {
  name: 'githubrepo',
  title: 'Select Github repo',
  type: 'string',
  inputComponent: GithubSelector
}

GitHubSelector.module.css

@import 'part:@sanity/base/theme/variables-style';

.item {
  padding: var(--small-padding);
}

.searchableSelect {
  composes: spacing from 'part:@sanity/components/buttons/default-style';
  grid-column: span 2;
  width: stretch;
}

.searchableSelectInput {
  width: 100%;
}

GithubSelectorInput.js

import React, { forwardRef, useState, useEffect } from 'react'
import SearchableSelect from 'part:@sanity/components/selects/searchable'
import {PatchEvent, set} from 'part:@sanity/form-builder/patch-event'
import styles from './GitHubSelector.module.css'

const SearchItem = item => <div className={styles.item}>{item.title}</div>

const GitHubSelector = forwardRef((props, ref) => {
  const getMatchingResults = (query, type) => {
    if (query.length > 2) {
      return repos.filter(({title}) => title.startsWith(query))
    }
    return repos
  }

  const handleSearch = query => {
    setResults(getMatchingResults(query, props.type))
  }

  const handleChange = ({value}) => {
    props.onChange(PatchEvent.from(set(value)))
  }
  useEffect(() => {
    fetch('https://api.github.com/users/sanity-io/repos')
    .then(res => res.json())
    .then(data => {
      setRepos(
        data.map(({name}) => ({title: name, value: name}))
      )
      setResults(
        data.map(({name}) => ({title: name, value: name}))
      )
    })
  },[props])
  const [repos, setRepos] = useState([])
  const [results, setResults] = useState([])

  return (
        <SearchableSelect
          ref={ref}
          className={styles.searchableSelectInput}
          placeholder="Type to search…"
          onSearch={handleSearch}
          onChange={handleChange}
          renderItem={SearchItem}
          value={{title: props.value, value: props.value}}
          inputValue={props.value}
          items={results}
        />
  )
})

export default GitHubSelector