@bsky.app/sift

A headless autocomplete UI library for React Native (including web). Uses @floating-ui/react-native for popover positioning and handles keyboard navigation on web.

Installation

pnpm add @bsky.app/sift

Peer dependencies: react, react-native, expo, @floating-ui/react-native.

Basic example

import {useState} from 'react'
import {View, Text, TextInput} from 'react-native'
import {useSift, Sift} from '@bsky.app/sift'

const items = [
  {key: '1', label: 'Alice'},
  {key: '2', label: 'Bob'},
  {key: '3', label: 'Charlie'},
]

function Autocomplete() {
  const [query, setQuery] = useState('')
  const sift = useSift({offset: 4})

  const filtered = items.filter(item =>
    item.label.toLowerCase().includes(query.toLowerCase()),
  )

  return (
    <View>
      <TextInput
        {...sift.targetProps}
        value={query}
        onChangeText={setQuery}
        placeholder="Search..."
      />

      {query.length > 0 && (
        <Sift
          sift={sift}
          data={filtered}
          onSelect={item => setQuery(item.label)}
          onDismiss={() => setQuery('')}
          render={({active, item}) => (
            <View style={active && {backgroundColor: '#eee'}}>
              <Text>{item.label}</Text>
            </View>
          )}
        />
      )}
    </View>
  )
}

Items must have a key: string property, used internally for list rendering.

useSift options

offset

Gap in pixels between the reference element and the floating popover. Defaults to 0.

const sift = useSift({offset: 8})

placement

Controls where the popover appears relative to the reference element. Accepts any @floating-ui/react-native placement value ('bottom', 'top', 'bottom-start', etc.). Defaults to 'bottom'.

const sift = useSift({placement: 'top'})

<Sift> props

onSelect

Called when the user selects an item, either by pressing it or by pressing Enter/Tab while it's highlighted via keyboard.

<Sift
  onSelect={item => {
    setQuery(item.label)
  }}
/>

onDismiss

Called when the user presses the Escape key (web only). Use this to close the popover or clear the query.

<Sift onDismiss={() => setQuery('')} />

inverted

Renders the list bottom-to-top and reverses keyboard navigation to match. Useful when the popover opens above the input.

<Sift
  sift={sift}
  data={filtered}
  inverted
  render={({active, item}) => (
    <View style={active && {backgroundColor: '#eee'}}>
      <Text>{item.label}</Text>
    </View>
  )}
/>

Keyboard navigation (web)

| Key | Action | | ------------------- | --------------------------------------------- | | ArrowDown / ArrowUp | Move through items (reversed when inverted) | | Home / End | Jump to first / last item | | Enter / Tab | Select the active item | | Escape | Calls onDismiss |