Discussion on: useDumbHooks

View post

Replies for: Well, here it is. import { useEffect } from 'react'; export default function useClickAway(onClickAway, ref) { useEffect(() => { docume...

This is what I did before in the component and how it's now:

componentDidMount() {
    document.addEventListener('mousedown', this.handleClickOutside);
  }

  componentWillUnmount() {
    document.removeEventListener('mousedown', this.handleClickOutside);
  }

  setWrapperRef = node => {
    this.wrapperRef = node;
  };

  handleClickOutside = event => {
    if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
      this.props.onClickAway();
    }
  };

const wrapperRef = useRef();
useClickAway(props.onClickAway, wrapperRef);