How to use use-onclickoutside - 10 common examples

require(`moment/locale/${locale}`); // eslint-disable-line global-require
      } catch (e) {
        console.warn(`Wrong locale ${locale}, ${e.message}`); // eslint-disable-line no-console
      }
    }
  }, []);

  const [preValue, setPreValue] = useState();
  const [date, setDate] = useState(moment().startOf('day'));
  const [calendarMonth, setCalendarMonth] = useState(
    moment()
      .startOf('day')
      .startOf('month')
  );
  const [calendarView, setCalendarView] = useState(VIEWS.DAY_VIEW);
  useOnClickOutside(ref, cancel);

  if (value && value !== preValue) {
    setPreValue(value);
    setDate(moment(value, dateFormat).startOf('day'));
    setCalendarMonth(
      moment(value, dateFormat)
        .startOf('day')
        .startOf('month')
    );
  }

  const onChange = useCallback(
    newDate => {
      if (calendarView === VIEWS.DAY_VIEW && timeFormat) {
        setCalendarView(VIEWS.TIME_VIEW);
        setDate(newDate.clone());

const Appointment = forwardRef(function Appointment(
  { dates, dateFormat, locale, confirm, cancel, position },
  ref
) {
  const [dayRange, setDayRange] = useState(isMobile() ? 4 : 7);
  const [index, setIndex] = useState(0);
  const [orderedDates, setOrderedDates] = useState();
  const [prevProps, setPrevProps] = useState();
  useOnClickOutside(ref, cancel);

  useEffect(() => {
    // TODO: create a custom hook useMomentLocale
    // Moment.js hack to load locales when needed
    if (locale !== 'en') {
      try {
        // eslint-disable-next-line import/no-dynamic-require
        require(`moment/locale/${locale}`); // eslint-disable-line global-require
      } catch (e) {
        console.warn(`Wrong locale ${locale}, ${e.message}`); // eslint-disable-line no-console
      }
    }

    const onResizeWindow = () => {
      setDayRange(isMobile() ? 4 : 7);
    };

if (key === '-') {
        computedValue = inputValue.charAt(0) === '-' ? inputValue.substr(1) : `-${inputValue}`;
      } else if (key === '.') {
        const leadingZero = ['', '-'].includes(inputValue);
        computedValue = `${inputValue}${leadingZero ? '0' : ''}${key}`;
      } else {
        computedValue = newValue;
      }
      setInputValue(computedValue);
      if (sync) {
        update(computedValue);
      }
    }
  }

  useOnClickOutside(ref, e => {
    if (validation(inputValue)) {
      confirm(inputValue);
    } else {
      cancel();
    }
  });

  // Reload props.value into the state
  useEffect(() => {
    setInputValue(value);
  }, [value]);

  useEffect(() => {
    if (keyboard.keyDownEvent) {
      /** useKeyBaordInput set null when initializing the initialValue to avoid this computation before validation  */
      if (['Enter', 'Tab'].includes(keyboard.keyDownEvent.key) && validation(keyboard.value)) {

export function ActionMenu({actionStates, onOpen, onClose, isOpen}: Props) {
  const clickOutsideRef = React.useRef(null)
  const listRef = React.useRef(null)
  useOnClickOutside(clickOutsideRef, () => {
    if (!isOpen) {
      return
    }
    // this is a bit hacky, but if there is a modal open, we should not close on outside clicks
    const hasOpenDialog = actionStates.some(state => state.dialog)
    if (!hasOpenDialog) {
      onClose()
    }
  })
  const idPrefix = useId()

  const [activeAction, setActiveAction] = React.useState(actionStates.find(s => !s.disabled))

  React.useEffect(() => {
    setActiveAction(actionStates.find(s => !s.disabled))
  }, [isOpen])

const Modal = ({ onClose, show, children }) => {
  const ref = useRef();
  useOnClickOutside(ref, onClose);

  // Render nothing if the "show" prop is false
  if (!show) {
    return null;
  }

  // The gray background
  const backdropStyle = {
    position: 'fixed',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: 'rgba(0,0,0,0.3)',
    padding: 50,
    zIndex: 12,

const existingAccountIds = Object.keys(accounts);
  const existingAccountNames = existingAccountIds.length
    ? existingAccountIds.map(accountId => accounts[accountId].name && accounts[accountId].name)
    : [];

  const existingAccountNameErr =
    defaultAccountName !== accountName &&
    existingAccountNames.includes(accountName) &&
    'You’ve already used this account name. Please name it something else.';

  const emptyAccountNameErr = !accountName && 'The account name can not be empty.';

  const AccountNameErr = emptyAccountNameErr || existingAccountNameErr;

  const ref = React.useRef();
  useOnClickOutside(ref, event => {
    if (!existingAccountNameErr) {
      setIsAccountNameEditable(false);
      onUpdateAccountName({
        toUpdateWallet: currentWallet,
        toUpdateAccount: account.address,
        newAccountName: accountName,
      });
    }
  });

  return account ? (
    
      }>
        
          
            {isAccountNameEditable ? (

({
        node,
        disabled,
        selected,
        bounds,
        onClick,
        onMouseDown,
        onPortMouseDown,
        onPortMouseUp,
        onClickOutside,
        children
    }: React.PropsWithChildren) => {
        const nodeRef = React.useRef();

        useOnClickOutside(nodeRef, onClickOutside);

        return (
             {
                    set(node.data, 'position', {
                        x: ui.x,
                        y: ui.y
                    });
                }}
                onMouseDown={onMouseDown}

export function SideNav(props) {
  const ref = React.useRef(null)

  useOnClickOutside(ref, () => {
    if (props.sideNavDisplay) {
      props.handleSideBar()
    }
  })

  function handleLogout() {
    logout()
    window.location = '/'
  }

  const loggedInUser = getUser()

  return (

export const Modal = ({ children, title, onClose, onDeleteClick }) => {
  const ref = useRef(null)
  useOnClickOutside(ref, onClose)

  return (
    <div>
      
        
          {title &amp;&amp; (
            
              <h3>{title}</h3>
            
          )}

          
            </div>

export const Context = ({ as, trigger, menu }: Props) => {
  const Wrapper = as || "div"
  const rootElement = document.querySelector("#context-menu")

  const wrapperRef: Ref = React.useRef(null)
  const menuRef: Ref = React.useRef(null)
  const [opened, toggle] = React.useReducer((prev) => !prev, false)
  const [position, setPosition] = React.useState(null)

  useOnClickOutside(menuRef, toggle)

  React.useEffect(() => {})

  React.useLayoutEffect(() => {
    if (opened) {
      const menuCur = menuRef.current
      const wrapperCur = wrapperRef.current
      const bodyCur = document.body

      if (menuCur && wrapperCur && bodyCur) {
        const wrapperRect = wrapperCur.getBoundingClientRect()
        const menuRect = menuCur.getBoundingClientRect()
        const bodyRect = bodyCur.getBoundingClientRect()

        const newPosition = {
          top: wrapperRect.top + wrapperRect.height,