gautam-arora24 / resize-observer-hook

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

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:

1. Clone this repo with https://github.com/Gautam-Arora24/resize-observer-hook.git
2. Run npm install in the root folder
3. Run npm install in the example folder
4. In seperate terminal window, run npm start in the root.
5. 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.

License

MIT © Gautam-Arora24, and the contributors.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Gautam Arora 💻

mehan 🎨

Nikhil Maske 💻

Batman09 📖

Keshav 📖

gim 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

resize-observer-hook's Issues

Migrate to Typescript.

Future Plans
Plans to add typing support to the library whenever I will get some time.

Change the file name of "./src/useResizeObserver" to "./src/index.js"

The source property in the package.json points to src/index.js which is missing in the actual src directory. Due to this, the code is not being compiled to dist directory and thus leading to errors.

Changes Proposed

The useResizeObserver.js should be renamed to index.js

Add a CONTRIBUTION.md file.

Currently, we lack on documentation on how the beginners should start contributing to the library. We should add a CONTRIBUTION.md file that will contain all the information required by the beginners to start contributing.

The key points on the documentation/file will include -

• Development environment required before contributing.
• Git principles that should be followed while contributing to the library.
• The code style.
• How to claim an issue?
• How to make a successful Pull Request?

Add an example folder to demonstrate the websites made through resize-observer-hook.

Currently, there is no way to see the actual usage of the resize-observer-hook in the repository.

Changes Proposed

Create an example directory in the root of the repo which will be a create-react-app to show the actual website's code that uses the hook.

Introduce ESLint support to the library along with `airbnb` style guide.

The addition of ESLint is required along with which we can Airbnb style guide into the project.

Need a logo for the library.

We need some sort of logo for the library. So, if you are a Graphic designer and wanted to contribute to the open source community then here's your good chance.

Remove the import of `useRef` from usage section in README.md.

The piece of code in the usage section contains the import of useRef which is no longer needed. The need for the ref parameter for the hook was removed in #2.

Changes Needed

• Remove the useRef import from the example code.
• Remove the ref paramater from the hook in the README.md.

Features support that can be added.

Discussed in #17

^{Originally posted by Gautam-Arora24 September 25, 2021}
I just wanna know from the community members that what new features can be added to the library's scope?

Make the hook self dependent by removing the ref parameter.

Currently, the useResizeObserver hook is dependent on the ref parameter which it will get from the element it is going to observe.

What changes can be made?

We can remove the ref parameter from the code and make it self-dependent by adding the useRef hook inside the hook itself. The ref parameter will be returned from the hook now.

Refractor

There are some files that are empty and some code that is generated by npx create-react-app xyz which is useless. We can remove this part for better and clean code.

Add support for multiple ResizeObserverBoxOptions.

Currently, the hook supports only the height and width of the element. But, we can add more pieces of data by using different properties of ResizeObserverEntry interface such as "borderBoxSize", "contentBoxSize" and etc.

For documentation refer here ->
https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry

Add a CONTRIBUTING.md file.

Currently, we lack documentation on how beginners should start contributing to the library. We should add a CONTRIBUTING.md file that will contain all the information required by the beginners to start contributing.

The key points on the documentation/file will include -

• Development environment required before contributing.
• Git principles that should be followed while contributing to the library.
• The code style.
• How to claim an issue?
• How to make a successful Pull Request?

Switch of "no-consistent-rule" in eslintrc.json file.

Remove the `--save` configuration from the npm install command in README.md

As of npm 5.0.0, installed modules are added as a dependency by default, so the --save option is no longer needed. We can safely remove the --save configuration from the command written in the README.md file.

New command ->
npm install resize-observer-hook