import useStateWithValidation from "./useStateWithValidation"

​

export default function StateWithValidationComponent() {

  const [username, setUsername, isValid] = useStateWithValidation(

    name => name.length > 4,

    ""

  )

​

  return (

    <>

      <div>Valid: {isValid.toString()}</div>

      <input

        type="text"

        value={username}

        onChange={e => setUsername(e.target.value)}

      />

    </>

  )

}

import useEventListener from "../13-useEventListener/useEventListener"

​

export default function useClickOutside(ref, cb) {

  useEventListener(

    "click",

    e => {

      if (ref.current == null || ref.current.contains(e.target)) return

      cb(e)

    },

    document

  )

}