gautam-arora24 / resize-observer-hook Goto Github PK

View Code? Open in Web Editor NEW

⚛️ A React Hook to monitor changes in the size of an element using native ResizeObserver API 🔍

License: MIT License

JavaScript 43.05% HTML 41.32% CSS 15.63%

resize-observer-hook's Introduction

resize-observer-hook

A hook that uses Resize Observer API to monitor changes in the size of an element.

Install

npm install resize-observer-hook

Usage

import React from 'react'

import useResizeObserver from 'resize-observer-hook'

const App = () => {
  const [ref, width, height] = useResizeObserver()

  return (
    <div ref={ref}>
      {width} X {height}
    </div>
  )
}

You can add multiple ResizeObserverBoxOptions to the useResizeObserver like this ->

const [ref,width,height] = useResizeObserver("borderBoxSize");

ResizeObserverBoxOptions that are supported currently in the library ->

borderBoxSize
contentBoxSize
contentRect

Note ⚠️ - Some options aren't supported in some broswers so if you provide any option that is not being supported in your current browser, it will automatically use contentRect to calculate height and width of the observed element.

See more details over here -> https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry

Contributing

You can help this library to grow by contributing here. Pick any issue or open one. Let us know what you are working on and ask your questions in the issues itself :)

The package is made up of 2 main folders:

/src contains all the resize-observer-hook code
/example is our create-react-app based demo website

To setup and run a local copy:

Clone this repo with https://github.com/Gautam-Arora24/resize-observer-hook.git
Run npm install in the root folder
Run npm install in the example folder
In seperate terminal window, run npm start in the root.
In seperate terminal window, run npm start in the example folder.

When you're done working on your changes, submit a PR with the details and include a screenshot if you've changed anything visually.