From bc682971216cb3347051b79d1b4382d48a3ab671 Mon Sep 17 00:00:00 2001 From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com> Date: Fri, 21 May 2021 11:54:42 -0700 Subject: [PATCH] compose: Add types to `useResizeObserver` --- packages/compose/README.md | 11 +++++++---- .../compose/src/hooks/use-resize-observer/index.js | 5 ++++- .../src/hooks/use-resize-observer/index.native.js | 2 +- packages/compose/tsconfig.json | 2 ++ 4 files changed, 14 insertions(+), 6 deletions(-) diff --git a/packages/compose/README.md b/packages/compose/README.md index 6092aa98a0a099..626aa400c0ec5c 100644 --- a/packages/compose/README.md +++ b/packages/compose/README.md @@ -406,6 +406,13 @@ _Returns_ Hook which allows to listen the resize event of any target element when it changes sizes. _Note: `useResizeObserver` will report `null` until after first render_ +Simply a re-export of `react-resize-aware` so refer to its documentation +for more details. + +_Related_ + +- + _Usage_ ```js @@ -421,10 +428,6 @@ const App = () => { }; ``` -_Returns_ - -- `Array`: An array of {Element} `resizeListener` and {?Object} `sizes` with properties `width` and `height` - # **useThrottle** Throttles a function with Lodash's `throttle`. A new throttled function will diff --git a/packages/compose/src/hooks/use-resize-observer/index.js b/packages/compose/src/hooks/use-resize-observer/index.js index a46539e10438db..e992b57fa6b834 100644 --- a/packages/compose/src/hooks/use-resize-observer/index.js +++ b/packages/compose/src/hooks/use-resize-observer/index.js @@ -7,7 +7,10 @@ import useResizeAware from 'react-resize-aware'; * Hook which allows to listen the resize event of any target element when it changes sizes. * _Note: `useResizeObserver` will report `null` until after first render_ * - * @return {Array} An array of {Element} `resizeListener` and {?Object} `sizes` with properties `width` and `height` + * Simply a re-export of `react-resize-aware` so refer to its documentation + * for more details. + * + * @see https://github.com/FezVrasta/react-resize-aware * * @example * diff --git a/packages/compose/src/hooks/use-resize-observer/index.native.js b/packages/compose/src/hooks/use-resize-observer/index.native.js index 477b4b77d993b0..981412b4f86e96 100644 --- a/packages/compose/src/hooks/use-resize-observer/index.native.js +++ b/packages/compose/src/hooks/use-resize-observer/index.native.js @@ -10,7 +10,7 @@ import { useState, useCallback } from '@wordpress/element'; /** * Hook which allows to listen the resize event of any target element when it changes sizes. * - * @return {Array} An array of {Element} `resizeListener` and {?Object} `sizes` with properties `width` and `height` + * @return {[JSX.Element, { width: number, height: number } | null]} An array of {Element} `resizeListener` and {?Object} `sizes` with properties `width` and `height` * * @example * diff --git a/packages/compose/tsconfig.json b/packages/compose/tsconfig.json index e2db3de66affc8..ce10937541992a 100644 --- a/packages/compose/tsconfig.json +++ b/packages/compose/tsconfig.json @@ -19,11 +19,13 @@ "src/hooks/use-constrained-tabbing/**/*", "src/hooks/use-debounce/**/*", "src/hooks/use-instance-id/**/*", + "src/hooks/use-isomorphic-layout-effect/**/*", "src/hooks/use-focus-return/**/*", "src/hooks/use-previous/**/*", "src/hooks/use-media-query/**/*", "src/hooks/use-reduced-motion/**/*", "src/hooks/use-merge-refs/**/*", + "src/hooks/use-resize-observer/**/*", "src/utils/**/*" ] }