		@@ -17,3 +17,3 @@ # Brightleaf React Hooks
		import React, { useState } from 'react'
		import { useGraphQL } from '@brightleaf/hooks'
		import { useGraphQL } from '@brightleaf/react-hooks'

		@@ -47,3 +47,3 @@ export default () => {
		import { Button, Form, TextBox } from 'react-form-elements'
		import { usePost } from '@brightleaf/hooks'
		import { usePost } from '@brightleaf/react-hooks'

		@@ -116,2 +116,41 @@ export default () => {
		)
		}
		}
		```

		## Click Outside Hook

		```javascript
		import React, { useState, useRef } from 'react'
		import { useClickOutside } from '@brightleaf/react-hooks'

		export default () => {
		const [menu, setMenu] = useState(false)
		const navMenu Ref= useRef()
		const hideDropDown = () => {
		setMenu(false)
		}
		useClickOutside(navMenu, hideDropDowns, menu)

		return (
		<div className="App">
		<nav ref={navMenu}>
		<div className={`dropdown ${menu ? 'active' : ' '}`}>
		<button
		type="button"
		className="dropdown-trigger"
		onClick={e => {
		setMenu(!ddG)
		}}
		>
		Menu
		</button>
		<div>
		...// items
		</div>
		</div>
		</nav>
		... // rest of page
		</div>
		)
		}
		```

@brightleaf/react-hooks - npm Package Compare versions

New alerts