react-ref-observe

A React hooks for observing an element resizing and clicking outside

Usage

npm i react-ref-observe

import*asReactfrom"react";import{observeResize,observeClickOutside}from"react-ref-observe";exportconstObservers=()=>{constfirstRef=React.useRef();constsecondRef=React.useRef();const[clicks,setClicks]=React.useReducer(c=>c+1,0);constfirstSize=observeResize(firstRef);observeClickOutside([secondRef],setClicks);return(<><divref={firstRef}>
width: {firstSize.width}, height: {firstSize.height}</div><divref={secondRef}>Clicks outside: {clicks}</div></>);};

API

observeResize(ref, callback)

Observes element resizing. Uses resize-observer-polyfill

• ref - React reference to a DOM element
• callbackoptional - callback function, taking argument {width, height}

Returns an object {width: Number, height: Number}

observeClickOutside(refs, callback)

Observes clicks outside an element

• refs - Array of react references to DOM elements
• callback - callback function, taking click or touch event argument