@jsjoeio/use-click-outside

A custom React Hook to help you close a menu by clicking outside of it

Install

npm install --save @jsjoeio/use-click-outside

Props

prop	type	example	description
initialValue	Boolean	false	the intial state of the menu (i.e. open put false closed put true)
elementId	string	"inner-menu"	the id on the element containing the menu (i.e. all your links)
appId	string	"my-awesome-react-app"	the id on the container of your entire app

Usage

import React from 'react'
import { ToggleButton, InnerMenu } from './Nav.styles'
import { useClickOutside } from '@jsjoeio/use-click-outside'

function Nav() {
  const [open, setOpen] = useClickOutside({
    initialValue: false,
    elementId: 'inner-menu',
    appId: 'example-react-app'
  })

  return (
    <header>
      <nav>
        <ToggleButton onClick={() => setOpen(!open)}>Menu</ToggleButton>
        <InnerMenu open={open} id="inner-menu">
          <ul>
            <li>Home</li>
            <li>Products</li>
            <li>Values</li>
            <li>Team</li>
            <li>Contact</li>
          </ul>
        </InnerMenu>
      </nav>
    </header>
  )
}

export default Nav

License

MIT © jsjoeio

---

This hook was created using create-react-hook.