useSelectOption

The useSelectOption hook implements interactivity and accessibility for a SelectOption component, which is used in conjunction with a Select component. You should probably never directly instantiate a SelectOption, though, except as part of the renderOption option for the Select config.

Arguments

The useSelectOption hook takes in the following arguments:

ArgumentDescription
plasmicClassThe generated Plasmic* class for your designed component
propsprops for your component, which extends from PlumeSelectOptionProps
configPlumeSelectOption Configuration for this component
refInstance of PlumeSelectOptionRef providing programmatic access

Return value

The useSelectOption hook returns an object with these keys:

KeyDescription
plumePropsProps to spread onto your Plasmic* component

Plume Config

KeyDescriptionRequired?
isSelectedVariantVariant to activate when the SelectOption is currently selectedRequired
isDisabledVariantVariant to activate when the SelectOption is disabledRecommended
contentSlotSlot name for the content of the SelectOption; will be filled with props.childrenRecommended
rootName of the root element of the componentRequired

Example

interface SelectOptionProps extends PlumeSelectOptionProps {

}
function SelectOption_(
  props: SelectOptionProps,
  ref: PlumeSelectOptionRef
) {
  const {plumeProps, state} = useSelectOption(
    PlasmicSelectOption,
    props,
    {
      isSelectedVariant: ["isSelected", "isSelected"],
      isDisabledVariant: ["isDisabled", "isDisabled"],

      contentSlot: "children",

      root: "root",
    },
    ref
  );
  return <PlasmicSelectOption {...plumeProps} />;
}

const SelectOption = React.forwardRef(SelectOption_);
export default SelectOption;