useCombobox

The useCombobox hook is a custom React hook that allows you to access and interact with the combobox's context. This hook is particularly useful when building components that need to manage the combobox's value, visibility, and reference to the DOM element.

Usage

First, you need to import the useCombobox hook from the kitchn package.

import { useCombobox } from "kitchn";

Example

Here is an example of how to use the useCombobox hook in a component:

import React from "react";
import { useCombobox } from "kitchn";
 
const ComboboxComponent = () => {
  const { value, updateValue, visible, updateVisible } = useCombobox();
 
  const handleChange = (event) => {
    if (updateValue) {
      updateValue(event.target.value);
    }
  };
 
  return (
    <div>
      {visible && (
        <input
          type="text"
          value={value || ""}
          onChange={handleChange}
        />
      )}
      <button onClick={() => updateVisible && updateVisible(!visible)}>
        Toggle Combobox
      </button>
    </div>
  );
};

Parameters

The useCombobox hook does not accept any parameters.

Return Value

The useCombobox hook returns an object with the following properties:

Name	Type	Description
`value`	`string \| undefined`	The current value of the combobox.
`updateValue`	`(value: string) => unknown \| undefined`	Function to update the combobox's value.
`visible`	`boolean \| undefined`	Indicates whether the combobox is visible.
`updateVisible`	`(next: boolean) => unknown \| undefined`	Function to update the visibility of the combobox.
`ref`	`MutableRefObject<HTMLElement \| null> \| undefined`	Reference to the combobox's DOM element.

useClipboard useCurrentState