react-component / resize-observer

👓 Resize observer for React

rc-resize-observer

Resize observer for React.

Live Demo

https://react-component.github.io/resize-observer/

Install

Usage

import ResizeObserver from 'rc-resize-observer';
import { render } from 'react-dom';

render(
  <ResizeObserver
    onResize={() => {
      console.log('resized!');
    }}
  >
    <textarea />
  </ResizeObserver>,
  mountNode,
);

API

Property	Type	Default	Description
disabled	boolean	false
onResize	({ width, height }) => void	-	Trigger when child node resized

Development

npm install
npm start

License

rc-resize-observer is released under the MIT license.

resize-observer's Issues

height/width from rc-resize-observer is strange in browser with low version

sample

in morden browser:

in 70.0.3538.77 chrome (or lower):

findDOMNode is deprecated in React's StrictMode (React 17 support)

Warning about deprecated findDOMNode usage. See react documentation.

ant-design/ant-design#26136

包裹一个空的React片段 onResize 不执行 这个问题导致 procomponents 的QueryFilter onResize执行有问题

import '../assets/index.less';
import React from 'react';
import ResizeObserver, { ResizeObserverProps } from '../src';

function Com(props) {
  return <>{props.children}</>;
}

export default function App() {
  const [times, setTimes] = React.useState(0);
  const [disabled, setDisabled] = React.useState(false);
  const textareaRef = React.useRef<HTMLTextAreaElement>(null);

  React.useEffect(() => {
    console.log('Ref:', textareaRef.current);
  }, []);

  const onResize: ResizeObserverProps['onResize'] = ({
    width,
    height,
    offsetHeight,
    offsetWidth,
  }) => {
    setTimes(prevTimes => prevTimes + 1);
    console.log(
      'Resize:',
      '\n',
      'BoundingBox',
      width,
      height,
      '\n',
      'Offset',
      offsetWidth,
      offsetHeight,
    );
  };

  return (
    <React.StrictMode>
      <div style={{ transform: 'scale(1.1)', transformOrigin: '0% 0%' }}>
        <div>
          <label>
            <input
              type="checkbox"
              onChange={() => {
                setDisabled(!disabled);
              }}
              checked={disabled}
            />{' '}
            Disabled Observe
          </label>
          {' >>> '}
          <span>Resize times: {times}</span>
        </div>
        <ResizeObserver onResize={onResize} disabled={disabled}>
          <Com>
            <textarea ref={textareaRef} placeholder="I'm a textarea!" />;
          </Com>
        </ResizeObserver>
      </div>
    </React.StrictMode>
  );
}

resizeobserver loop limit exceeded

it's caused by popover'destroyTooltipOnhide property when I click a popover serveral times with chrome devtools closed(devtools open can not trigger)
I used an ant design popver
I found it uses rc-tooltip
and rc-tooltip uses ->trigger ->popup->motion
I don't know what problems it is
but it caused resizeobserver loop limit exceeded

sorry for my poor english

Collection的onBatchResize会闭包state

可在repo内example/collection.tsx文件的onBatchResize函数内添加console.log({ size1 })，观看demo效果。当多次发生resize时，打印的size1始终是第一次渲染时的size1。

原因应该是src/SingleObserver/index.tsx内，onInternalResize用useCallback做了持久化，如果onCollectionResize发生了更新则无法通知onInternalResize做出更新。因此应该加一个

const onCollectionResizeRef = React.useRef(onCollectionResize); onCollectionResizeRef.current = onCollectionResize;

之类的改造；

或者src/Collection.tsx对onBatchResize用ref包装，onResize依赖传空数组做成持久化。

文本节点通过observe监听报类型错误

<ResizeObserver onResize={onResize} disabled={disabled}>
          <Wrapper>
            11
            <textarea ref={textareaRef} placeholder="I'm a textarea!" />
          </Wrapper>
</ResizeObserver>

如果传入文本节点 通过findDOMNode获取到的是nodeType为3的节点，通过调用observe(currentElement, onInternalResize); 传入类型不匹配导致报错,还有就是如果传入() => <div>11</div> 函数渲染的话，通过findDOMNode找不到被监听的函数

我从antd里的Affix中发现的问题 最后定位到这了。

使用 antd.Table.scroll.x 会导致脚本异常：ResizeObserver loop completed with undelivered notifications.

最小复现 demo：

<Table
        scroll={{ x: '2000' }}
        columns={columns}
        dataSource={data?.list}

报错详情：

Hooks support

const { width, height } = useResizeObserver({ disabled });

Need to check whether element is instance of Element or not?

resize-observer/src/index.tsx

Line 71 in 73473bd

if (!this.resizeObserver && element) {

Currently, error occurred when element is not an instance of Element:

'observe' on 'ResizeObserver': parameter 1 is not of type 'Element'.

Issues with resize-observer-polyfill dependency

que-etc/resize-observer-polyfill#83 means people cannot update Typescript. I think one option would be to fork the dependency.

[QUESTION]如何解决因为动画导致高度变化没有监听到

• resize-observer 外层会有动画效果
• resize-observer 第一次拿到的内部的高度是动画之前的
• 动画结束以后，resize-observer没有触发更新

Maximum update depth exceeded

After updating ant.d from v4 to v5 we started to get errors "Maximum update depth exceeded". most of the times these errors comes from our e2e tests written in cypress, but sometimes you can catch it just by clicking select field inside/outside.

I can see that not some time ago this PR was made that had changes in useEffect.
#172

And SingleObserver components is first one in crashing stack trace. Maybe they are connected?