From 04ff824ac2f69aaa82d08bf2905ad4667327db12 Mon Sep 17 00:00:00 2001 From: Segun Adebayo Date: Wed, 10 Aug 2022 15:21:32 +0400 Subject: [PATCH] feat: add use-size hook (#6457) * feat: add use-size hook * chore: update lockfile * chore: deprecate use dimensions * chore: add storybook for use size * fix: update hook deps --- .changeset/shaggy-camels-dance.md | 5 +++ .changeset/sharp-llamas-rush.md | 5 +++ hooks/.gitkeep | 0 hooks/use-size/README.md | 24 +++++++++++ hooks/use-size/index.ts | 1 + hooks/use-size/package.json | 45 +++++++++++++++++++++ hooks/use-size/src/index.ts | 21 ++++++++++ hooks/use-size/stories/use-size.stories.tsx | 24 +++++++++++ packages/hooks/src/use-dimensions.ts | 6 +++ pnpm-lock.yaml | 13 ++++++ 10 files changed, 144 insertions(+) create mode 100644 .changeset/shaggy-camels-dance.md create mode 100644 .changeset/sharp-llamas-rush.md delete mode 100644 hooks/.gitkeep create mode 100644 hooks/use-size/README.md create mode 100644 hooks/use-size/index.ts create mode 100644 hooks/use-size/package.json create mode 100644 hooks/use-size/src/index.ts create mode 100644 hooks/use-size/stories/use-size.stories.tsx diff --git a/.changeset/shaggy-camels-dance.md b/.changeset/shaggy-camels-dance.md new file mode 100644 index 00000000000..2767bcc636f --- /dev/null +++ b/.changeset/shaggy-camels-dance.md @@ -0,0 +1,5 @@ +--- +"@chakra-ui/hooks": patch +--- + +Deprecate use-dimensions in favor of the use-size hook diff --git a/.changeset/sharp-llamas-rush.md b/.changeset/sharp-llamas-rush.md new file mode 100644 index 00000000000..0ea07b3bd97 --- /dev/null +++ b/.changeset/sharp-llamas-rush.md @@ -0,0 +1,5 @@ +--- +"@chakra-ui/react-use-size": patch +--- + +Initial release diff --git a/hooks/.gitkeep b/hooks/.gitkeep deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/hooks/use-size/README.md b/hooks/use-size/README.md new file mode 100644 index 00000000000..f0924420c84 --- /dev/null +++ b/hooks/use-size/README.md @@ -0,0 +1,24 @@ +# @chakra-ui/react-use-size + +A Quick description of the component + +> This is an internal utility, not intended for public usage. + +## Installation + +```sh +yarn add @chakra-ui/react-use-size +# or +npm i @chakra-ui/react-use-size +``` + +## Contribution + +Yes please! See the +[contributing guidelines](https://github.com/chakra-ui/chakra-ui/blob/master/CONTRIBUTING.md) +for details. + +## Licence + +This project is licensed under the terms of the +[MIT license](https://github.com/chakra-ui/chakra-ui/blob/master/LICENSE). diff --git a/hooks/use-size/index.ts b/hooks/use-size/index.ts new file mode 100644 index 00000000000..46e72b16a1b --- /dev/null +++ b/hooks/use-size/index.ts @@ -0,0 +1 @@ +export * from "./src" diff --git a/hooks/use-size/package.json b/hooks/use-size/package.json new file mode 100644 index 00000000000..6e560a8f611 --- /dev/null +++ b/hooks/use-size/package.json @@ -0,0 +1,45 @@ +{ + "name": "@chakra-ui/react-use-size", + "version": "1.0.0", + "description": "Track an element size over time", + "keywords": [ + "react-use-size" + ], + "author": "Segun Adebayo ", + "homepage": "https://github.com/chakra-ui/chakra-ui#readme", + "license": "MIT", + "main": "dist/index.cjs.js", + "module": "dist/index.esm.js", + "types": "dist/index.d.ts", + "sideEffects": false, + "files": [ + "dist" + ], + "publishConfig": { + "access": "public" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/chakra-ui/chakra-ui.git", + "directory": "packages/react-use-size" + }, + "bugs": { + "url": "https://github.com/chakra-ui/chakra-ui/issues" + }, + "scripts": { + "build": "tsup src/index.ts --format=esm,cjs --dts", + "dev": "pnpm build -- --watch", + "clean": "rimraf dist .turbo", + "typecheck": "tsc --noEmit", + "build:fast": "tsup src/index.ts --format=esm,cjs" + }, + "dependencies": { + "@zag-js/element-size": "0.1.0" + }, + "peerDependencies": { + "react": ">=18" + }, + "devDependencies": { + "react": "^18.0.0" + } +} diff --git a/hooks/use-size/src/index.ts b/hooks/use-size/src/index.ts new file mode 100644 index 00000000000..beae5742c94 --- /dev/null +++ b/hooks/use-size/src/index.ts @@ -0,0 +1,21 @@ +import { trackElementSize } from "@zag-js/element-size" +import { useEffect, useLayoutEffect, useState } from "react" + +type Size = { + width: number + height: number +} + +const useSafeLayoutEffect = Boolean(globalThis?.document) + ? useLayoutEffect + : useEffect + +export function useSize(ref: React.RefObject) { + const [size, setSize] = useState() + useSafeLayoutEffect(() => { + return trackElementSize(ref.current, (size) => { + setSize(size) + }) + }, []) + return size +} diff --git a/hooks/use-size/stories/use-size.stories.tsx b/hooks/use-size/stories/use-size.stories.tsx new file mode 100644 index 00000000000..f1634fcc626 --- /dev/null +++ b/hooks/use-size/stories/use-size.stories.tsx @@ -0,0 +1,24 @@ +import { Meta } from "@storybook/react" +import React, { useRef } from "react" +import { useSize } from "../src" + +const meta: Meta = { + title: "Hooks / useSize", +} + +export function MeasureSize() { + const ref = useRef(null) + const size = useSize(ref) + return ( +
+

Measured Size: {JSON.stringify(size, null, 4)}

+
+ In publishing and graphic design, Lorem ipsum is a placeholder text + commonly used to demonstrate the visual form of a document or a typeface + without relying on meaningful content +
+
+ ) +} + +export default meta diff --git a/packages/hooks/src/use-dimensions.ts b/packages/hooks/src/use-dimensions.ts index 131e9f3be4c..7d5cb944c8f 100644 --- a/packages/hooks/src/use-dimensions.ts +++ b/packages/hooks/src/use-dimensions.ts @@ -7,6 +7,12 @@ import { useSafeLayoutEffect } from "./use-safe-layout-effect" * * @param ref ref of the component to measure * @param observe if `true`, resize and scroll observers will be turned on + * + * @deprecated use the `useSize` hook instead + * + * ```jsx + * import { useSize } from "@chakra-ui/react-use-size" + * ``` */ export function useDimensions( ref: React.RefObject, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index df9eaa27c53..5365961e3f1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -320,6 +320,15 @@ importers: typescript: 4.7.4 vite: 3.0.4 + hooks/use-size: + specifiers: + '@zag-js/element-size': 0.1.0 + react: ^18.2.0 + dependencies: + '@zag-js/element-size': 0.1.0 + devDependencies: + react: 18.2.0 + packages/accordion: specifiers: '@chakra-ui/button': workspace:* @@ -9352,6 +9361,10 @@ packages: /@xtuc/long/4.2.2: resolution: {integrity: sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==} + /@zag-js/element-size/0.1.0: + resolution: {integrity: sha512-QF8wp0+V8++z+FHXiIw93+zudtubYszOtYbNgK39fg3pi+nCZtuSm4L1jC5QZMatNZ83MfOzyNCfgUubapagJQ==} + dev: false + /@zag-js/focus-visible/0.1.0: resolution: {integrity: sha512-PeaBcTmdZWcFf7n1aM+oiOdZc+sy14qi0emPIeUuGMTjbP0xLGrZu43kdpHnWSXy7/r4Ubp/vlg50MCV8+9Isg==} dev: false