@react-hook/size

A React hook for measuring the size of HTML elements including when they change


Keywords
react, react hook, react size hook, size hook, use size, use measure, measure hook, debounce, hooks, hooks-api, hooks-library, react-hook, react-hooks, react-hooks-typescript, throttle, typescript, typescript-hooks, window-scroll, window-size
License
MIT
Install
npm install @react-hook/size@2.1.2

Documentation

↩ react-hook

Strongly typed React hooks for function components



Hook Description
useAsync() A React hook for gracefully resolving, cancelling, and handling errors for async functions and promises.
useCache() A React hook for accessing an asynchronous key/value cache that persists data between renders and components. This allows you to do neat stuff like preload data before your next page or component has even started mounting.
useChange() A React hook that invokes a callback anytime a value changes
useClick() A React hook for conditionally firing a function when an element is clicked - for instance if you only want a click even to fire on double-clicks.
useCopy() A React hook for copying text to the clipboard
useCounter() A React hook counter with min/max/step/cast options
useDebounce() A React hook for debouncing setState and other callbacks
useEvent() A React hook for adding events to HTML elements. This hook cleans up your listeners automatically when it unmounts. You won't have to worry about wrapping your listener in a useCallback() because this hook makes sure your most recent callback is always invoked.
useGoogleOptimize() A React hook for adding Google Optimize variants to components.
useHotkey() A React hook for invoking a callback when hotkeys are pressed. This hook also provides interop between event.key and event.which - you provide a string, and the library turns it into an event.which key code if it has to.
useHover() A React hook for tracking the hover state of DOM elements in browsers where hovering is possible. If the browser does not support hover states (e.g. a phone) the isHovering value will always be false.
useIntersectionObserver() A React hook for the IntersectionObserver API that uses a polyfill when the native API is not available.
useLatest() A React hook that updates useRef().current with the most recent value each invocation
useMediaQuery() React hooks that update when media queries change between matched and unmatched states.
useMergedRef() A React hook for merging multiple refs into one ref.
useMousePosition() A React hook for tracking the position, hover, and "down" state of the mouse as it interacts with an element. This hook provides interoperability between touch and desktop devices and will treat ontouch events the same as onmouse ones. Additionally, this hook is throttled to 30fps by default using a useThrottle() hook, though the precise frame rate is configurable.
usePassiveLayoutEffect() A React hook that uses useEffect() on the server and useLayoutEffect() in the browser
usePrevious() A React hook that stores a value from the previous render
useResizeObserver() A React hook that fires a callback whenever ResizeObserver detects a change to its size.
useServerPromises() A React hook for continuously rendering a React tree until no promises are pushed to server-promises's context in a given render
useSize() A React hook for measuring the size of HTML elements including when they change
useSwitch() A React hook for controlling a boolean value with toggle, on, and off callbacks.
useThrottle() A React hook for throttling setState and other callbacks.
useToggle() A React hook for toggling between two values with a callback.
useWindowScroll() A React hook for updating components when the scroll position of the window on the y-axis changes.
useWindowSize() React hooks for updating components when the size of the window changes.

Note on IE11

If you need support for legacy browsers you will have to do what you should be doing already anyway and compile your dependencies to your desired target. This library does not ship transformations for browsers the maintainer doesn't care about performing maintenance for.

Contributing

👋 Click here to see how to contribute

LICENSE

MIT