How to use @restart/hooks - 10 common examples

preventMouseRootCloseRef.current =
        !currentTarget ||
        isModifiedEvent(e) ||
        !isLeftClickEvent(e) ||
        contains(currentTarget, e.target);
    },
    [ref],
  );

  const handleMouse = useEventCallback(e => {
    if (!preventMouseRootCloseRef.current) {
      onClose(e);
    }
  });

  const handleKeyUp = useEventCallback(e => {
    if (e.keyCode === escapeKeyCode) {
      onClose(e);
    }
  });

  useEffect(() => {
    if (disabled || ref == null) return undefined;

    const doc = ownerDocument(ref.current);

    // Use capture for this listener so it fires before React's listener, to
    // avoid false positives in the contains() check below if the target DOM
    // element is removed in the React mouse callback.
    const removeMouseCaptureListener = listen(
      doc,
      clickTrigger,

},
    ref,
  ) => {
    const prefix = useBootstrapPrefix(bsPrefix, 'dropdown-item');
    const onSelectCtx = useContext(SelectableContext);
    const navContext = useContext(NavContext);

    const { activeKey } = navContext || {};
    const key = makeEventKey(eventKey, href);

    const active =
      propActive == null && key != null
        ? makeEventKey(activeKey) === key
        : propActive;

    const handleClick = useEventCallback(event => {
      // SafeAnchor handles the disabled case, but we handle it here
      // for other components
      if (disabled) return;
      if (onClick) onClick(event);
      if (onSelectCtx) onSelectCtx(key, event);
      if (onSelect) onSelect(key, event);
    });

    return (

drop,
  alignEnd,
  defaultShow,
  show: rawShow,
  onToggle: rawOnToggle,
  itemSelector,
  focusFirstItemOnShow,
  children,
}) {
  const forceUpdate = useForceUpdate();
  const { show, onToggle } = useUncontrolled(
    { defaultShow, show: rawShow, onToggle: rawOnToggle },
    { show: 'onToggle' },
  );

  const [toggleElement, setToggle] = useCallbackRef();

  // We use normal refs instead of useCallbackRef in order to populate the
  // the value as quickly as possible, otherwise the effect to focus the element
  // may run before the state value is set
  const menuRef = useRef();
  const menuElement = menuRef.current;

  const setMenu = useCallback(
    ref => {
      menuRef.current = ref;
      // ensure that a menu set triggers an update for consumers
      forceUpdate();
    },
    [forceUpdate],
  );

childBsPrefix,
      // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
      as: Component = Button,
      ...props
    },
    ref,
  ) => {
    const prefix = useBootstrapPrefix(bsPrefix, 'dropdown-toggle');

    if (childBsPrefix !== undefined) {
      props.bsPrefix = childBsPrefix;
    }

    const [toggleProps, { toggle }] = useDropdownToggle();

    toggleProps.ref = useMergedRefs(
      toggleProps.ref,
      useWrappedRefWithWarning(ref, 'DropdownToggle'),
    );

    // This intentionally forwards size and variant (if set) to the
    // underlying component, to allow it to render size and style variants.
    return (
      
        {children}
      
    );

function Dropdown({
  drop,
  alignEnd,
  defaultShow,
  show: rawShow,
  onToggle: rawOnToggle,
  itemSelector,
  focusFirstItemOnShow,
  children,
}) {
  const forceUpdate = useForceUpdate();
  const { show, onToggle } = useUncontrolled(
    { defaultShow, show: rawShow, onToggle: rawOnToggle },
    { show: 'onToggle' },
  );

  const [toggleElement, setToggle] = useCallbackRef();

  // We use normal refs instead of useCallbackRef in order to populate the
  // the value as quickly as possible, otherwise the effect to focus the element
  // may run before the state value is set
  const menuRef = useRef();
  const menuElement = menuRef.current;

  const setMenu = useCallback(
    ref => {
      menuRef.current = ref;

// We use normal refs instead of useCallbackRef in order to populate the
  // the value as quickly as possible, otherwise the effect to focus the element
  // may run before the state value is set
  const menuRef = useRef();
  const menuElement = menuRef.current;

  const setMenu = useCallback(
    ref => {
      menuRef.current = ref;
      // ensure that a menu set triggers an update for consumers
      forceUpdate();
    },
    [forceUpdate],
  );

  const lastShow = usePrevious(show);
  const lastSourceEvent = useRef(null);
  const focusInDropdown = useRef(false);

  const toggle = useCallback(
    event => {
      onToggle(!show, event);
    },
    [onToggle, show],
  );

  const context = useMemo(
    () => ({
      toggle,
      drop,
      show,
      alignEnd,

...props
    },
    ref,
  ) => {
    bsPrefix = useBootstrapPrefix('toast');
    const delayRef = useRef(delay);
    const onCloseRef = useRef(onClose);

    useEffect(() => {
      // We use refs for these, because we don't want to restart the autohide
      // timer in case these values change.
      delayRef.current = delay;
      onCloseRef.current = onClose;
    }, [delay, onClose]);

    const autohideTimeout = useTimeout();
    const autohideFunc = useCallback(() => {
      if (!(autohide && show)) {
        return;
      }
      onCloseRef.current();
    }, [autohide, show]);

    autohideTimeout.set(autohideFunc, delayRef.current);

    const useAnimation = useMemo(() => Transition && animation, [
      Transition,
      animation,
    ]);

    const toast = (

setMenu,
      setToggle,
    ],
  );

  if (menuElement && lastShow && !show) {
    focusInDropdown.current = menuElement.contains(document.activeElement);
  }

  const focusToggle = useEventCallback(() => {
    if (toggleElement && toggleElement.focus) {
      toggleElement.focus();
    }
  });

  const maybeFocusFirst = useEventCallback(() => {
    const type = lastSourceEvent.current;
    let focusType = focusFirstItemOnShow;

    if (focusType == null) {
      focusType =
        menuRef.current && matches(menuRef.current, '[role=menu]')
          ? 'keyboard'
          : false;
    }

    if (
      focusType === false ||
      (focusType === 'keyboard' && !/^key.+$/.test(type))
    ) {
      return;
    }

warning(
        !!currentTarget,
        'RootClose captured a close event but does not have a ref to compare it to. ' +
          'useRootClose(), should be passed a ref that resolves to a DOM node',
      );

      preventMouseRootCloseRef.current =
        !currentTarget ||
        isModifiedEvent(e) ||
        !isLeftClickEvent(e) ||
        contains(currentTarget, e.target);
    },
    [ref],
  );

  const handleMouse = useEventCallback(e => {
    if (!preventMouseRootCloseRef.current) {
      onClose(e);
    }
  });

  const handleKeyUp = useEventCallback(e => {
    if (e.keyCode === escapeKeyCode) {
      onClose(e);
    }
  });

  useEffect(() => {
    if (disabled || ref == null) return undefined;

    const doc = ownerDocument(ref.current);

(
    { bsPrefix, className, children, label, as: Component, onClick, ...props },
    ref,
  ) => {
    bsPrefix = useBootstrapPrefix(bsPrefix, 'navbar-toggler');

    const { onToggle, expanded } = useContext(NavbarContext) || {};

    const handleClick = useEventCallback(e => {
      if (onClick) onClick(e);
      if (onToggle) onToggle();
    });

    if (Component === 'button') {
      props.type = 'button';
    }

    return (