Function Select

packages/react-aria/stories/select/example.tsx:25–59

(props: AriaSelectProps<T>)

import {useSelectState} from 'react-stately/useSelectState';

export function Select<T extends object>(props: AriaSelectProps<T>): JSX.Element {
  // Create state based on the incoming props
  let state = useSelectState(props);

  // Get props for child elements from useSelect
  let ref = React.useRef(null);
  let {labelProps, triggerProps, valueProps, menuProps, hiddenSelectProps} = useSelect(
    props,
    state,
    ref
  );

  // Get props for the button based on the trigger props from useSelect
  let {buttonProps} = useButton(triggerProps, ref);

  return (
    <div style={{position: 'relative', display: 'inline-block'}}>
      <div {...labelProps}>{props.label}</div>
      <HiddenSelect {...hiddenSelectProps} />
      <button {...buttonProps} ref={ref} style={{height: 30, fontSize: 14}}>
        <span {...valueProps}>
          {state.selectedItem ? state.selectedItem.rendered : 'Select an option'}
        </span>
        <span aria-hidden="true" style={{paddingLeft: 5}}>
          ▼
        </span>
      </button>
      {state.isOpen && (
        <Popover isOpen={state.isOpen} onClose={state.close}>
          <ListBox {...menuProps} state={state} />
        </Popover>
      )}
    </div>
  );
}

function Popover(props) {
  let ref = React.useRef(undefined);