useDumbHooks

stereobooster on February 12, 2019

This article inspired by Sara Vieira's talk "Build dumb sh*t". Best way to learn something is to use it, to play with it (primitive interpretati... [Read Full]
markdown guide
 

I wrote one dumb hook (extracted from the code, actually), useClickAway, which detects a click outside of the element (so I could hide the dropdown menu, for example). It just was nicer to have it separated instead of that code being copypasted around in different components.

 

Nice. Do you have it as open source repo or a gist or a codesandbox?

 

Well, here it is.

import { useEffect } from 'react';

export default function useClickAway(onClickAway, ref) {
  useEffect(() => {
    document.addEventListener('mousedown', handleClick);
    return () => {
      document.removeEventListener('mousedown', handleClick);
    };
  }, []);

  function handleClick(event) {
    if (ref.current && !ref.current.contains(event.target)) onClickAway();
  }
}

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();
    }
  };

vs

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

Wrote today

const useUniqueId = () => {
  const id = React.useRef<string>(null);
  if (!id.current) id.current = nanoid();
  return id.current;
}
 
const useUniqueId = () => React.useState(nanoid)[0];
 

This is quite smart and more idiomatic than my version. Write more

 

useStackOverflow(question) - Posts your question to StackOverflow, runs the first answer through eval and then returns the result.

 
code of conduct - report abuse