Function useResize

packages/core/src/hooks/useResize.ts:37–79

({
  container,
  ...springOptions
}: UseResizeOptions)

 * @returns {SpringValues<{width: number; height: number;}>} SpringValues the collection of values returned from the inner hook
 */
export const useResize = ({
  container,
  ...springOptions
}: UseResizeOptions): SpringValues<{
  width: number
  height: number
}> => {
  const [sizeValues, api] = useSpring(
    () => ({
      width: 0,
      height: 0,
      ...springOptions,
    }),
    []
  )

  useIsomorphicLayoutEffect(() => {
    const cleanupScroll = onResize(
      ({ width, height }) => {
        api.start({
          width,
          height,
          immediate:
            sizeValues.width.get() === 0 ||
            sizeValues.height.get() === 0 ||
            springOptions.immediate === true,
        })
      },
      { container: container?.current || undefined }
    )

    return () => {
      /**
       * Stop the springs on unmount.
       */
      each(Object.values(sizeValues), value => value.stop())

      cleanupScroll()
    }
  }, [])

  return sizeValues
}