How to use @reach/auto-id - 10 common examples

return ({ children }) => {
    const reactRefs = Object.keys(def.refs).reduce((reactRefs, name) => {
      reactRefs[name] = useRef(def.refs[name]);
      return reactRefs;
    }, {});

    const rootId = useId();
    const service = useMachineService(def.chart, reactRefs);

    if (def.setup) {
      // safe in a conditional cause def's are static
      useEffect(() => {
        return def.setup(service.send);
      }, [service.send]);
    }

    return (
      
        
      
    );
  };
}

*/
    selection: value,
    /*
     * The value the user has navigated to when the list is expanded.
     */
    navigationSelection: null
  };

  const [
    state,
    data,
    transition,
    { buttonRef, inputRef, listRef, mouseMovedRef, optionsRef, popoverRef }
  ] = useReducerMachine(stateChart, reducer, initialData);

  const id = useId(props.id);

  const listboxId = makeId("listbox", id);

  const buttonId = makeId("button", id);

  const ref = useForkedRef(inputRef, forwardedRef);

  // Parses our children to find the selected option.
  // See docblock on the function for more deets.
  const selectedNode = recursivelyFindChildByValue(children, value);

  const context = {
    buttonId,
    buttonRef,
    data,
    inputRef,

ref
) {
  // useRef because you shouldn't switch between controlled/uncontrolled
  const { current: isControlled } = useRef(controlledIndex != null);

  warning(
    !(isControlled && controlledIndex == null),
    "Tabs is changing from controlled to uncontrolled. Tabs should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled Tabs for the lifetime of the component. Check the `index` prop being passed in."
  );

  warning(
    !(!isControlled && controlledIndex != null),
    "Tabs is changing from uncontrolled to controlled. Tabs should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled Tabs for the lifetime of the component. Check the `index` prop being passed in."
  );

  const id = useId(props.id);

  // we only manage focus if the user caused the update vs.
  // a new controlled index coming in
  const _userInteractedRef = useRef(false);

  const _selectedPanelRef = useRef(null);

  const [selectedIndex, setSelectedIndex] = useState(defaultIndex || 0);

  const clones = React.Children.map(children, child => {
    if (elementIsNullOrString(child)) return child;
    return cloneElement(child, {
      selectedIndex: isControlled ? controlledIndex : selectedIndex,
      _id: id,
      _userInteractedRef,
      _selectedPanelRef,

export function useTooltip({
  id: idProp,
  onMouseEnter,
  onMouseMove,
  onMouseLeave,
  onFocus,
  onBlur,
  onKeyDown,
  onMouseDown,
  ref: forwardedRef,
  DEBUG_STYLE
} = {}) {
  const id = useId(idProp);

  const [isVisible, setIsVisible] = useState(
    DEBUG_STYLE
      ? true
      : id === null
      ? false
      : context.id === id && state === VISIBLE
  );

  // hopefully they always pass a ref if they ever pass one
  const ownRef = useRef();
  const ref = useForkedRef(forwardedRef, ownRef);
  const triggerRect = useRect(ownRef, isVisible);

  useEffect(() => {
    return subscribe(() => {

readOnly = false,
    toggle = false,
    ...props
  },
  forwardedRef
) {
  /*
   * You shouldn't switch between controlled/uncontrolled. We'll check for a
   * controlled component and track any changes in a ref to show a warning.
   */
  const wasControlled = typeof controlledIndex !== "undefined";
  const { current: isControlled } = useRef(wasControlled);

  const [descendants, setDescendants] = useDescendants();

  const id = useId(props.id);

  const [activeIndex, setActiveIndex] = useState(
    isControlled
      ? controlledIndex
      : defaultIndex != null
      ? defaultIndex
      : toggle
      ? -1
      : 0
  );

  /*
   * We will store all AccordionTrigger refs inside this array to manage focus.
   */
  const focusableTriggerNodes = useRef([]);

export const useElementIds = (props: MultishiftA11yIdProps) => {
  const defaultId = useId();

  return getElementIds(defaultId, props);
};

(
    { isOpen, defaultIsOpen, id, isDisabled, onChange, children, ...rest },
    ref,
  ) => {
    const [isExpanded, setIsExpanded] = useState(defaultIsOpen || false);
    const { current: isControlled } = useRef(isOpen != null);
    let _isExpanded = isControlled ? isOpen : isExpanded;

    const onToggle = () => {
      onChange && onChange(!_isExpanded);
      !isControlled && setIsExpanded(!isExpanded);
    };

    const uuid = useId();
    const uniqueId = id || uuid;

    const headerId = `accordion-header-${uniqueId}`;
    const panelId = `accordion-panel-${uniqueId}`;

    return (

addAriaLabels = true,
  preserveScrollBarGap,
  formatIds = id => ({
    portal: `chakra-portal-${id}`,
    content: `modal-${id}`,
    header: `modal-${id}-header`,
    body: `modal-${id}-body`,
  }),
  container,
  returnFocusOnClose = true,
  children,
  id,
  size = "md",
}) => {
  const contentRef = useRef(null);
  const uuid = useId();
  const _id = id || uuid;

  const contentId = formatIds(_id)["content"];
  const headerId = formatIds(_id)["header"];
  const bodyId = formatIds(_id)["body"];
  const portalId = formatIds(_id)["portal"];

  let addAriaLabelledby = false;
  let addAriaDescribedby = false;

  if (typeof addAriaLabels === "object") {
    addAriaLabelledby = addAriaLabels["header"];
    addAriaDescribedby = addAriaLabels["body"];
  }

  if (typeof addAriaLabels === "boolean") {

export const Menu = ({ id, children }) => {
  const buttonRef = useRef(null);
  const menuRef = useRef(null);
  const popoverRef = useRef(null);
  const [state, dispatch] = useReducer(reducer, initialState);
  const menuId = useId(id);

  const context = {
    buttonRef,
    dispatch,
    menuId,
    menuRef,
    popoverRef,
    state
  };

  useEffect(() => void checkStyles("menu-button"), []);

  return (
    
      
        {typeof children === "function"