用户大小调整观测器

• 特征
• 安装
• 使用量
  • 提供a ref 从 useRef
  • 提供 DOM 元素
  • API 密码
• 许可证

《公约》的执行情况 调整观察员界面的大小 来告诉你元素的大小.

演示数字 : 密码沙盒

特征

• 钩子 - 通过一个裁判!
• 备选 API - 通过一个 Element 和处理的可选函数 ResizeObserver 召回电话.
• 类型 - 用 TypeScript 编写 !

++ 此软件包包括 resize-observer-polyfill 用于完整浏览器支持。 这个包装小马桶 ResizeObserver 运行时间 基于浏览器.

安装

运行如下 :

# Yarn
yarn add @asyarb/use-resize-observer

# NPM
npm i @asyarb/use-resize-observer --save

使用量

提供a ref 从 useRef

为观察一个组件的再大小,通过 ref 一个组件改为: useResizeObserver数字 :

const Example = () => {
  const ref = useRef()
  const [height, setHeight] = useState(0)

  // Get the content rect directly from the hook:
  const sizes = useResizeObserver({ ref })

  // Perform any side effect with those sizes!
  useEffect(() => void setHeight(sizes.height), [sizes])

  return <div ref={ref}>Some content...</div>
}

sizes 当观察到的元素被调整时,将更新.

或者,您可以通过一个函数作为第二个参数执行任何 调整大小的副作用。 此函数收到 ResizeObserver 条目 (单位:千美元)ResizeObserverEntry)作为参数的对象.

const Example = () => {
  const ref = useRef
  const [height, setHeight] = useState(0)

  // Provide an optional callback to perform side effects instead:
  useResizeObserver({
    ref,
    callback: entry => setHeight(entry.contentRect.height),
  })

  return <div ref={ref}>Some content...</div>
}

提供 DOM 元素

useResizeObserver 也可以选择 HTMLElement 如回归 值从 document.querySelector()。 。 。 .

const element = document.querySelector('.someClass')

const Example = () => {
  const [height, setHeight] = useState(0)

  // Pass an HTMLElement directly:
  const sizes = useResizeObserver({ element })

  // Perform any side effect with that element's sizes!
  useEffect(() => void setHeight(sizes.height), [sizes])

  return <div ref={ref}>Some content...</div>
}

和前一个例子一样,也可以提供回调功能.

API 密码

许可证

麻省理工学院.