Skip to main content

useOnClickOutside

Importing useOnClickOutside Hook​

import { useOnClickOutside } from '@ciceksepeti/cui-hooks';

Example​

import React, { useRef, useState } from 'react';
import { useOnClickOutside } from '@ciceksepeti/cui-hooks';

export const Example = () => {
  const [counter, setCounter] = useState(0);
  const insideRef = useRef(null);
  const outsideRef = useRef(null);
  const onOutsideClick = () => {
    setCounter((prevState) => prevState + 1);
  };

  useOnClickOutside(insideRef, onOutsideClick);

  return (
    <>
      <div ref={outsideRef}>
        outside
        <div ref={insideRef} style={{ border: '1px solid red' }}>
          inside
        </div>
      </div>
      <p>Counter: >{counter}</p>
    </>
  );
};

Preview & Test​

PREVIEW & TEST AREA
useOnClickOutside

  • Handler will be called when outside of a specified area is clicked. In this example specified area is inside area.

  • Each outside click will trigger increment on counter value

Testing area is Deactive now

outside
inside

Counter: 0