roh

resize-observer-hook

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

Showing:

Popularity

Downloads/wk

11

GitHub Stars

20

Maintenance

Last Commit

17d ago

Contributors

2

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Categories

Readme

resize-observer-hook

logo by mehan

All Contributors

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

NPM JavaScript Style Guide

Install

npm install --save 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>
  )
}

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

🎨

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100