resize-observer
react-hook
Our great sponsors
resize-observer | react-hook | |
---|---|---|
2 | 3 | |
940 | 1,385 | |
0.2% | - | |
1.8 | 0.0 | |
10 months ago | 24 days ago | |
TypeScript | TypeScript | |
Apache License 2.0 | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
resize-observer
-
How to use Resize Observer with React
Uses @juggle/resize-observer as a ponyfill when ResizeObserver isn't supported by the current browser,
-
Quick guide to Resize Observer
Despite the fact that ResizeObserver API is still in Editor’s Draft(still in progress), according to Can I use its global 94.13% support is pretty impressive. There is also a nice and powerful polyfill that allows you to use it in older browsers (even IE 9-10 🙄).
react-hook
-
How to use Resize Observer with React
Our requirements look good and pretty strict, uh? But don't worry, we can deal with all of them using the beautiful and very easy-to-use useResizeObserver hook from the beautiful react-hook library by Jared Lunde. According to it's documentation and my tests and usage as well it meets all our requirements:
-
Concurrent-safe version of useLatest in React?
const useLatest = (current: T) => { const storedValue = React.useRef(current) React.useEffect(() => { storedValue.current = current }) return storedValue} From https://github.com/jaredLunde/react-hook/blob/master/packages/latest/src/index.tsx
-
Best Practices for Publishing Hooks
Here are two solid examples: https://github.com/jaredLunde/react-hook https://github.com/juliencrn/useHooks.ts
What are some alternatives?
storybook - Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.
use-debounce - A debounce hook for react
Angular - Deliver web apps with confidence 🚀
usehooks.ts - React hook library, ready to use, written in Typescript. [Moved to: https://github.com/juliencrn/usehooks-ts]
ionic - A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript. [Moved to: https://github.com/ionic-team/ionic-framework]
react-use-hotjar - Adds Hotjar capabilities as custom hooks such as init, identify and stateChange
resize-observer
react-gtm-hook - Easily manage the Google Tag Manager via Hook
html-rewriter - WASM-based implementation of Cloudflare's HTML Rewriter for use in Deno, browsers, etc.
use-color - 🛼🛼🛼 The powerful color hook that all designers deserve. ✨ Parse and stringify that just works & 🦾 Strict type checking at compile time
Ionic Framework - A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
use-timer - A timer hook for React