@_use/clickout v0.1.3

useClickOut

useClickOut is a custom hook that captures the click in and out of an HTML element. It returns an array with three values and has a single argument.

• Returns: ref : First value, Type: React.RefObject<HTMLDivElement> state : Second value, Type: boolean setState : Third value, Type: React.Dispatch<React.SetStateAction<boolean>>

• Argument initialState: boolean

Install

npm i @_use/clickout

Usage

import useClickOut from '@_use/clickout'

const Square = () => {

  const [ ref, state, setState ] = useClickOut(false)

  return (<>
    <div 
      ref={ref}
      onClick={() => setState(true)}  
    >
      Click
        {state ? ' Inside ' : ' Outside '}
      the square.
    </div>
  </>)
}

export default Square

Type

if you need useClickOut type, import inside UseClickOut braces with first letter capitalized.

import useClickOut, { UseClickOut } from '@_use/clickout'

type UseClickOut = (initialState:boolean) => [
  React.RefObject<HTMLDivElement>,
  boolean,
  React.Dispatch<React.SetStateAction<boolean>>
]