https://github.com/zzarcon/react-resize-observer-hook

ResizeObserver + React hooks
https://github.com/zzarcon/react-resize-observer-hook

hooks observer react react-hooks resize resize-observer

Last synced: 6 months ago
JSON representation

ResizeObserver + React hooks

• Host: GitHub
• URL: https://github.com/zzarcon/react-resize-observer-hook
• Owner: zzarcon
• License: mit
• Created: 2019-01-28T00:53:57.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T02:13:48.000Z (over 2 years ago)
• Last Synced: 2024-12-07T12:41:56.596Z (6 months ago)
• Topics: hooks, observer, react, react-hooks, resize, resize-observer
• Language: TypeScript
• Homepage: https://zzarcon.github.io/react-resize-observer-hook
• Size: 3.5 MB
• Stars: 103
• Watchers: 3
• Forks: 3
• Open Issues: 26
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-resize-observer-hook [![Build Status](https://travis-ci.org/zzarcon/react-resize-observer-hook.svg?branch=master)](https://travis-ci.org/zzarcon/react-resize-observer-hook)

> ResizeObserver + React hooks



  

  





## Demo

[zzarcon.github.io/react-resize-observer-hook](https://zzarcon.github.io/react-resize-observer-hook)

## Install

```

yarn add react-resize-observer-hook

```

## Usage

```js

import {useState, useRef} from 'react';

import useResize from 'react-resize-observer-hook';

export default () => {

  const [dimensions, setDimensions] = useState({width: 100, height: 50})

  const parentRef = useRef(null);

  

  useResizeObserver(parentRef, (entry) => setDimensions({

    width: entry.width,

    height: entry.height,

  }));

  return (

    


      {dimensions.width} x {dimensions.height}

    

  )

}


```

## API

```typescript

DOMRectReadOnly {

  bottom: number;

  height: number;

  left: number;

  right: number;

  top: number;

  width: number;

  x: number;

  y: number;

  toJSON(): any;

}

ObserverCallback = (entry: DOMRectReadOnly) => void;

useResizeObserver = (ref: RefObject, callback: ObserverCallback) => {

```

## Author

[@zzarcon](https://twitter.com/zzarcon)