useClickAway

The

useClickAway

hook is used to handle click outside of its provided ref

Params

Name	Type	Default	Description
ref	React.ref
onClickAway	function		Called when user clicks outside of the ref

Example

Dark Mode

function Component() {
  let [state, setState] = React.useState(() => false)
  let innerRef = React.useRef(null)

  useClickAway(innerRef, () => setState((_) => false))

  return (
    <Box>
      <button onClick={(_) => setState((_) => true)}>Open</button>
      {state ? <div ref={innerRef}>Click outside me to close</div> : null}
    </Box>
  )
}function Component() {
  let [state, setState] = React.useState(() => false)
  let innerRef = React.useRef(null)

  useClickAway(innerRef, () => setState((_) => false))

  return (
    <Box>
      <button onClick={(_) => setState((_) => true)}>Open</button>
      {state ? <div ref={innerRef}>Click outside me to close</div> : null}
    </Box>
  )
}