renderOption

This an example of the default option rendering function. Based on that you can create your own renderOption function. See Highlighter for more details on how to highlight search term.


import { useAutocomplete } from '../context'
import { AutocompleteOptionDefault, AutocompleteProps } from '../types'
import Highlighter from 'react-highlight-words'
 
export const _renderOption = (props: RenderOptionProps, option: AutocompleteOptionDefault) => {
  const { getOptionLabel, autoHighlight } = useAutocomplete()
  const label = getOptionLabel!(option)
 
  return (
    <li {...props}>
      {autoHighlight ? <Highlighter searchWords={[props.query]} textToHighlight={label} /> : label}
    </li>
  )
}

Custom example


type Character = {
  id: string
  name: string
  image: string
  species: string
  //... rest
}
 
const renderOption = (props: AutocompleteOptionProps, option: Character) => (
  <div {...props} className={clsx(props.className, 'h-fit w-fit p-2')}>
    <div className='flex gap-2 items-center'>
      <Avatar size='sm' src={option.image} />
      <div className='flex flex-col'>
        <span className='font-medium'>{option.name}</span>
        <span className='text-info text-xs'>{option.species}</span>
      </div>
    </div>
  </div>
)

Caveats

The props of renderOption carry className that has all interaction on hover and focus. You can either preserve this like in example or skip altogether if you want to have your own styles for things like selected, hover or disabled. Please refer to type definition to find out what you can base your styles on.

Highlighting of search term is lost in custom option component, but you can implement it yourself, e.g. using react-highlight-words library.

Component API

type of RenderOptionProps

Prop	Default	Description
`key`	—	`string` Key of the option
`tabIndex`	—	`number` Tab index of the option
`aria-selected`	—	`boolean` Aria-selected attribute of the option
`aria-disabled`	—	`boolean` Aria-disabled attribute of the option
`aria-label`	—	`string` Aria-label attribute of the option
`role`	—	`string` Role attribute of the option
`className`	—	`string` Class name of the option
`ref`	—	`(node: any) => void` ref passed to the option `li` tag. Used by @floating-ui/react
`active`	—	`boolean` Is option being hovered or tabbed on?
`selected`	—	`boolean` Is option currently selected?
`disabled`	—	`boolean` Is option disabled?
`label`	—	`string` Label of the option. Result of `getOptionLabel` docs.