React Resize Observer Hook Save

ResizeObserver + React hooks

Project README

react-resize-observer-hook Build Status

ResizeObserver + React hooks

Logo

Demo

zzarcon.github.io/react-resize-observer-hook

Install

yarn add react-resize-observer-hook

Usage

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 (
    <div ref={parentRef}>
      {dimensions.width} x {dimensions.height}
    </div>
  )
}

API

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<HTMLElement>, callback: ObserverCallback) => {

Author

@zzarcon

Open Source Agenda is not affiliated with "React Resize Observer Hook" Project. README Source: zzarcon/react-resize-observer-hook
Stars
103
Open Issues
22
Last Commit
3 months ago
License
MIT

Open Source Agenda Badge

Open Source Agenda Rating