react-onclickoutside - npm Package Compare versions

Comparing version 6.12.0 to 6.12.1

CHANGELOG.md

package.json

		{
		"name": "react-onclickoutside",
		"version": "6.12.0",
		"version": "6.12.1",
		"description": "An onClickOutside wrapper for React components",
		@@ -5,0 +5,0 @@ "main": "dist/react-onclickoutside.cjs.js",

README.md

		@@ -82,23 +82,51 @@ [![npm version](https://img.shields.io/npm/v/react-onclickoutside.svg)](https://www.npmjs.com/package/react-onclickoutside)

		This HoC does not support functional components, as it relies on class properties and component instances. However, you almost certainly don't need this HoC in modern (React 16+) functional component code, as a simple function will do the trick just fine. E.g.:

		```js
		import React, { useState } from "react";
		import onClickOutside from "react-onclickoutside";
		function listenForOutsideClicks(listening, setListening, menuRef, setIsOpen) {
		return () => {
		if (listening) return;
		if (!menuRef.current) return;
		setListening(true);
		[`click`, `touchstart`].forEach((type) => {
		document.addEventListener(`click`, (evt) => {
		if (menuRef.current.contains(evt.target)) return;
		setIsOpen(false);
		});
		});
		}
		}
		```

		Used in a functional component as:

		```js
		import React, { useEffect, useState, useRef } from "react";
		import listenForOutsideClicks from "./somewhere";

		const Menu = () => {
		const [isOpen, setIsOpen] = useState(false);
		const menuRef = useRef(null);
		const [listening, setListening] = useState(false);
		const [isOpen, setIsOpen] = useState(false);
		const toggle = () => setIsOpen(!isOpen);
		Menu.handleClickOutside = () => setIsOpen(false);

		useEffect(listenForOutsideClick(
		listening,
		setListening,
		menuRef,
		setIsOpen,
		));

		return (
		//...
		)
		<div ref={menuRef} className={isOpen ? "open" : "hidden"}>
		<h1 onClick={toggle}>...</h1>
		<ul>...</ul>
		</div>
		);
		};

		const clickOutsideConfig = {
		handleClickOutside: () => Menu.handleClickOutside
		};

		export default onClickOutside(Menu, clickOutsideConfig);
		export default Menu;
		```

		Example: https://codesandbox.io/s/vn66kq7mml
		Example: https://codesandbox.io/s/trusting-dubinsky-k3mve

		@@ -105,0 +133,0 @@

react-onclickoutside - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics