DEV Community

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 interpretation...

Read full post

Anna Simoroshka • Feb 13 '19

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.

stereobooster • Feb 13 '19

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

Anna Simoroshka • Feb 13 '19 • Edited

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

Anna Simoroshka • Feb 13 '19

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

stereobooster • Feb 14 '19

Wrote today

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

alutom • Mar 6 '19

const useUniqueId = () => React.useState(nanoid)[0];

stereobooster • Mar 6 '19 • Edited

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

Gabe Ragland • Feb 13 '19

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

stereobooster • Feb 13 '19

Ah classic