zzarcon / React Resize Observer Hook
Licence: mit
ResizeObserver + React hooks
Stars: ✭ 101
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to React Resize Observer Hook
react-use-observer
Performant react hooks for WebApi Observers, useResizeObserver, useInteractionObserver, useMutationObserver
Stars: ✭ 19 (-81.19%)
Mutual labels: hooks, observer
state inspector
State change & method call logger. A debugging tool for instance variables and method calls.
Stars: ✭ 24 (-76.24%)
Mutual labels: hooks, observer
Resize Observer
Polyfills the ResizeObserver API.
Stars: ✭ 540 (+434.65%)
Mutual labels: observer, resize
React Ufo
🛸 react-ufo - A simple React hook to help you with data fetching 🛸
Stars: ✭ 85 (-15.84%)
Mutual labels: hooks
Postinstall Build
Helper for conditionally building your npm package on postinstall
Stars: ✭ 87 (-13.86%)
Mutual labels: hooks
Platform Samples
A public place for all platform sample projects.
Stars: ✭ 1,328 (+1214.85%)
Mutual labels: hooks
React Selector Hooks
Collection of hook-based memoized selector factories for declarations outside of render.
Stars: ✭ 84 (-16.83%)
Mutual labels: hooks
Use Substate
🍙 Lightweight (<600B minified + gzipped) React Hook to subscribe to a subset of your single app state.
Stars: ✭ 97 (-3.96%)
Mutual labels: hooks
React Anime
✨ (ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React!
Stars: ✭ 1,313 (+1200%)
Mutual labels: hooks
Use Query Params
React Hook for managing state in URL query parameters with easy serialization.
Stars: ✭ 1,278 (+1165.35%)
Mutual labels: hooks
Pre Commit Hooks
A set of useful (and documented!) git pre-commit hooks.
Stars: ✭ 95 (-5.94%)
Mutual labels: hooks
Debug Objects
WordPress Plugin for debugging and learning with and at the application.
Stars: ✭ 98 (-2.97%)
Mutual labels: hooks
Flagged
Feature Flags for React made easy with hooks, HOC and Render Props
Stars: ✭ 97 (-3.96%)
Mutual labels: hooks
Swifthook
A library to hook methods in Swift and Objective-C.
Stars: ✭ 93 (-7.92%)
Mutual labels: hooks
react-resize-observer-hook
ResizeObserver + React hooks
Demo
zzarcon.github.io/react-resize-observer-hook
Install
yarn add react-resize-observer-hook
Usage
import {useState, useRef} from 'react';
import useResize from 'react-resize-observer-hook';
export default () => {
const [dimensions, setDimensions] = useState({width: 100, height: 50})
const parentRef = useRef(null);
useResizeObserver(parentRef, (entry) => setDimensions({
width: entry.width,
height: entry.height,
}));
return (
<div ref={parentRef}>
{dimensions.width} x {dimensions.height}
</div>
)
}
API
DOMRectReadOnly {
bottom: number;
height: number;
left: number;
right: number;
top: number;
width: number;
x: number;
y: number;
toJSON(): any;
}
ObserverCallback = (entry: DOMRectReadOnly) => void;
useResizeObserver = (ref: RefObject<HTMLElement>, callback: ObserverCallback) => {
Author
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].