prosekit/react/autocomplete

import {
  AutocompleteEmpty,
  AutocompleteItem,
  AutocompletePopup,
  AutocompletePositioner,
  AutocompleteRoot,
} from 'prosekit/react/autocomplete'

<AutocompleteRoot>
  <AutocompletePositioner>
    <AutocompletePopup>
      <AutocompleteItem>...</AutocompleteItem>
      <AutocompleteEmpty>...</AutocompleteEmpty>
    </AutocompletePopup>
  </AutocompletePositioner>
</AutocompleteRoot>

Props for the AutocompleteEmpty React component.

Props for the AutocompleteItem React component.

value?: string

The value of the item, which will be matched against the query.

If not provided, the value is the item's text content.

Default

Section titled “Default”

""

disabled?: boolean

Whether this option is disabled.

Default

Section titled “Default”

false

onSelect?: (event: SelectEvent) => void

Emitted when the the item is selected.

Props for the AutocompletePopup React component.

onValueChange?: (event: ValueChangeEvent) => void

Emitted when the selected value changes. Only available when multiple is false.

onValuesChange?: (event: ValuesChangeEvent) => void

Emitted when the selected values change. Only available when multiple is true.

Props for the AutocompletePositioner React component.

placement?: Placement

The placement of the popover, relative to the text cursor.

Default

Section titled “Default”

"bottom-start"

offset?: OffsetOptions

The distance between the popover and the hovered block.

Default

Section titled “Default”

4

inline?: boolean

Default

Section titled “Default”

true

hoist?: boolean

Default

Section titled “Default”

true

fitViewport?: boolean

Default

Section titled “Default”

true

boundary?: Boundary

Default

Section titled “Default”

"The body element"

overflowPadding?: number

Default

Section titled “Default”

8

strategy?: "fixed" | "absolute"

The strategy to use for positioning

Default

Section titled “Default”

"absolute"

autoUpdate?: boolean | AutoUpdateOptions

Options to activate auto-update listeners

See

Section titled “See”

https://floating-ui.com/docs/autoUpdate

Default

Section titled “Default”

true

flip?: boolean | Placement[]

Whether to flip the placement in order to keep it in view when the preferred placement(s) will overflow the clipping boundary. You can also provide an array of placements to try sequentially if the preferred placement does not fit.

Default

Section titled “Default”

true

shift?: boolean

Whether the floating element should shift to keep it in view.

Default

Section titled “Default”

true

overlap?: boolean

Whether the floating element can overlap the reference element to keep it in view.

Default

Section titled “Default”

false

sameWidth?: boolean

Whether to constrain the floating element's width so that it matches the reference element.

Default

Section titled “Default”

false

sameHeight?: boolean

Whether to constrain the floating element's height so that it matches the reference element.

Default

Section titled “Default”

false

hide?: boolean

Whether to hide the floating element when the reference element or the floating element is fully clipped.

Default

Section titled “Default”

false

rootBoundary?: RootBoundary

Describes the root boundary that the element will be checked for overflow relative to. Please see https://floating-ui.com/docs/detectoverflow#rootboundary for more information.

Default

Section titled “Default”

'viewport'

elementContext?: ElementContext

The element that will be used to check for overflow. Please see https://floating-ui.com/docs/detectoverflow#elementcontext for more information.

Default

Section titled “Default”

'floating'

altBoundary?: boolean

Whether to check the alternate elementContext's boundary. Please see https://floating-ui.com/docs/detectoverflow#altboundary for more information.

Default

Section titled “Default”

false

Props for the AutocompleteRoot React component.

regex?: RegExp | null

The regular expression to match the query text to autocomplete.

Default

Section titled “Default”

null

filter?: ItemFilter | null

The filter function to determine if an item should be shown in the listbox.

Default

Section titled “Default”

defaultItemFilter

onOpenChange?: (event: OpenChangeEvent) => void

Fired when the open state changes.

onQueryChange?: (event: QueryChangeEvent) => void

Fired when the query changes.

onValueChange?: (event: ValueChangeEvent) => void

Emitted when the selected value changes. Only available when multiple is false.

onValuesChange?: (event: ValuesChangeEvent) => void

Emitted when the selected values change. Only available when multiple is true.

const AutocompleteEmpty: ForwardRefExoticComponent<AutocompleteEmptyProps & HTMLAttributes<AutocompleteEmptyElement> & RefAttributes<AutocompleteEmptyElement>>

A React component that renders an prosekit-autocomplete-empty custom element.

const AutocompleteItem: ForwardRefExoticComponent<AutocompleteItemProps & Omit<HTMLAttributes<AutocompleteItemElement>, "onSelect"> & RefAttributes<AutocompleteItemElement>>

A React component that renders an prosekit-autocomplete-item custom element.

const AutocompletePopup: ForwardRefExoticComponent<AutocompletePopupProps & HTMLAttributes<AutocompletePopupElement> & RefAttributes<AutocompletePopupElement>>

A React component that renders an prosekit-autocomplete-popup custom element.

const AutocompletePositioner: ForwardRefExoticComponent<AutocompletePositionerProps & HTMLAttributes<AutocompletePositionerElement> & RefAttributes<AutocompletePositionerElement>>

A React component that renders an prosekit-autocomplete-positioner custom element.

const AutocompleteRoot: ForwardRefExoticComponent<AutocompleteRootProps & HTMLAttributes<AutocompleteRootElement> & RefAttributes<AutocompleteRootElement>>

A React component that renders an prosekit-autocomplete-root custom element.