is a React that measure an element's size and handle with highly-performant way, using . Try it you will ❤️ it! react-cool-dimensions hook responsive components ResizeObserver ⚡️ Try yourself: https://react-cool-dimensions.netlify.app Features 🚀 Measures element's size with highly-performant way, using . ResizeObserver 🎣 Easy to use, based on React . hook 🍰 Easy to handle , provides an alternative solution to the problem. responsive components container queries 📦 Supports bo rder-box size measurement. 🎛 Super flexible design to cover most cases for you. API 📜 Supports type definition. TypeScript 🗄️ Server-side rendering compatibility. 🦔 Tiny size ( ). No external dependencies, aside for the react. ~ 1kB gzipped Usage has a flexible design, it can cover simple to complex use cases for you. Here are some examples to show you how does it work. react-cool-dimensions API Basic Use Case To report the size of an element by the and states. Please note, it reports the of the element. width height content rectangle useDimensions ; App = { { observe, unobserve, width, height, entry } = useDimensions({ : { unobserve(); observe(); },
  }); ( );
}; import from "react-cool-dimensions" const => () const onResize ( ) => { observe, unobserve, width, height, entry } // Triggered whenever the size of the target is changed... // To stop observing the current target element // To re-start observing the current target element return Hi! My width is {width}px and height is {height}px < = > div ref {observe} </ > div Responsive Components We have but those are based on the browser viewport not individual elements. In some cases, we'd like to style components based on the width of a containing element rather than the browser viewport. To meet this demand there's a for , but it still doesn't exist today... media queries proposal container queries No worries, react-cool-dimensions provides an alternative solution for us! We can activate the by the breakpoints option. It's a width-based solution, once it's activated we can easily apply different styles to a component according to the currentBreakpoint state. The overall concept as below. responsive mode useDimensions ; Card = { { observe, currentBreakpoint } = useDimensions({ breakpoints: { : , : , : , : }, updateOnBreakpointChange: , : { },
  }); ( <div class="card-header">I'm 😎</div> <div class="card-body">I'm 👕</div> <div class="card-footer">I'm 👟</div> );
}; import from "react-cool-dimensions" const => () const // The "currentBreakpoint" will be the object key based on the target's width // for instance, 0px - 319px (currentBreakpoint = XS), 320px - 479px (currentBreakpoint = SM) and so on XS 0 SM 320 MD 480 LG 640 // Will only update the state on breakpoint changed, default is false true onResize ( ) => { currentBreakpoint } // Now the event callback will be triggered when breakpoint is changed // we can also access the "currentBreakpoint" here return < = ` ${ }`} = > div class { card currentBreakpoint ref {observe} </ > div Thanks for reading, for more usage details check out the project's GitHub page: https://github.com/wellyshen/react-cool-dimensions You can also install this package is distributed via . npm $ yarn add react-cool-dimensions $ npm install --save react-cool-dimensions # or

Super

Target

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

React Hook to Measure an Element's Size and Handle Responsive Components

Too Long; Didn't Read

Companies Mentioned

welly

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

React Hook to Measure an Element's Size and Handle Responsive Components

Too Long; Didn't Read

Companies Mentioned

welly

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES