{"id":13450353,"url":"https://github.com/wellyshen/react-cool-dimensions","last_synced_at":"2025-05-15T03:08:30.647Z","repository":{"id":37069816,"uuid":"262532098","full_name":"wellyshen/react-cool-dimensions","owner":"wellyshen","description":"😎 📏 React hook to measure an element's size and handle responsive components.","archived":false,"fork":false,"pushed_at":"2023-08-12T16:39:34.000Z","size":3699,"stargazers_count":935,"open_issues_count":22,"forks_count":20,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-08T20:54:45.137Z","etag":null,"topics":["container-queries","dimensions","hook","measure","performance","react","resizeobserver","responsive-components","size","typescript"],"latest_commit_sha":null,"homepage":"https://react-cool-dimensions.netlify.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wellyshen.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null},"funding":{"github":null,"patreon":null,"open_collective":"react-cool-dimensions","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2020-05-09T09:08:26.000Z","updated_at":"2025-04-08T17:17:55.000Z","dependencies_parsed_at":"2023-09-23T14:39:03.194Z","dependency_job_id":null,"html_url":"https://github.com/wellyshen/react-cool-dimensions","commit_stats":{"total_commits":698,"total_committers":9,"mean_commits":77.55555555555556,"dds":0.4899713467048711,"last_synced_commit":"c6a9c29351be8f81715fd4d141fc56c0ddd9a778"},"previous_names":[],"tags_count":47,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wellyshen%2Freact-cool-dimensions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wellyshen%2Freact-cool-dimensions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wellyshen%2Freact-cool-dimensions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wellyshen%2Freact-cool-dimensions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wellyshen","download_url":"https://codeload.github.com/wellyshen/react-cool-dimensions/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254140865,"owners_count":22021234,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["container-queries","dimensions","hook","measure","performance","react","resizeobserver","responsive-components","size","typescript"],"created_at":"2024-07-31T07:00:33.865Z","updated_at":"2025-05-15T03:08:30.583Z","avatar_url":"https://github.com/wellyshen.png","language":"TypeScript","funding_links":["https://opencollective.com/react-cool-dimensions"],"categories":["Packages","TypeScript"],"sub_categories":[],"readme":"# \u003cem\u003e\u003cb\u003eREACT COOL DIMENSIONS\u003c/b\u003e\u003c/em\u003e\n\nA React [hook](https://reactjs.org/docs/hooks-custom.html#using-a-custom-hook) that measure an element's size and handle [responsive components](#responsive-components) with highly-performant way, using [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API). Try it you will 👍🏻 it!\n\n❤️ it? ⭐️ it on [GitHub](https://github.com/wellyshen/react-cool-dimensions/stargazers) or [Tweet](https://twitter.com/intent/tweet?text=With%20@react-cool-dimensions,%20I%20can%20build%20a%20performant%20web%20app.%20Thanks,%20@Welly%20Shen%20🤩) about it.\n\n[![build status](https://img.shields.io/github/workflow/status/wellyshen/react-cool-dimensions/CI?style=flat-square)](https://github.com/wellyshen/react-cool-dimensions/actions?query=workflow%3ACI)\n[![coverage status](https://img.shields.io/coveralls/github/wellyshen/react-cool-dimensions?style=flat-square)](https://coveralls.io/github/wellyshen/react-cool-dimensions?branch=master)\n[![npm version](https://img.shields.io/npm/v/react-cool-dimensions?style=flat-square)](https://www.npmjs.com/package/react-cool-dimensions)\n[![npm downloads](https://img.shields.io/npm/dm/react-cool-dimensions?style=flat-square)](https://www.npmtrends.com/react-cool-dimensions)\n[![npm downloads](https://img.shields.io/npm/dt/react-cool-dimensions?style=flat-square)](https://www.npmtrends.com/react-cool-dimensions)\n[![gzip size](https://badgen.net/bundlephobia/minzip/react-cool-dimensions?label=gzip%20size\u0026style=flat-square)](https://bundlephobia.com/result?p=react-cool-dimensions)\n[![All Contributors](https://img.shields.io/badge/all_contributors-6-orange?style=flat-square)](#contributors-)\n[![PRs welcome](https://img.shields.io/badge/PRs-welcome-brightgreen?style=flat-square)](CONTRIBUTING.md)\n[![Twitter URL](https://img.shields.io/twitter/url?style=social\u0026url=https%3A%2F%2Fgithub.com%2Fwellyshen%2Freact-cool-dimensions)](https://twitter.com/intent/tweet?text=With%20@react-cool-dimensions,%20I%20can%20build%20a%20performant%20web%20app.%20Thanks,%20@Welly%20Shen%20🤩)\n\n![demo](https://user-images.githubusercontent.com/21308003/91013915-0f18a400-e61b-11ea-9232-291284159cac.gif)\n\n⚡️ Try yourself: https://react-cool-dimensions.netlify.app\n\n## Features\n\n- 🚀 Measures element's size with highly-performant way, using [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API).\n- 🎣 Easy to use, based on React [hook](https://reactjs.org/docs/hooks-custom.html#using-a-custom-hook).\n- 🍰 Easy to handle [responsive components](#responsive-components), provides an alternative solution to the [container queries](https://wicg.github.io/container-queries) problem.\n- 📦 Supports [border-box size measurement](#border-box-size-measurement).\n- 🕹 Supports [conditionally updating state](#conditionally-updating-state).\n- 🎛 Super flexible [API](#api) design to cover most cases for you.\n- 📜 Supports [TypeScript](#working-in-typescript) type definition.\n- 🗄️ Server-side rendering compatibility.\n- 🦔 Tiny size ([~ 1kB gzipped](https://bundlephobia.com/result?p=react-cool-dimensions)). No external dependencies, aside for the `react`.\n\n## Requirement\n\nTo use `react-cool-dimensions`, you must use `react@16.8.0` or greater which includes hooks.\n\n## Installation\n\nThis package is distributed via [npm](https://www.npmjs.com/package/react-cool-dimensions).\n\n```sh\n$ yarn add react-cool-dimensions\n# or\n$ npm install --save react-cool-dimensions\n```\n\n## Usage\n\n`react-cool-dimensions` has a flexible [API](#api) design, it can cover simple to complex use cases for you. Here are some examples to show you how does it work.\n\n\u003e ⚠️ [Most modern browsers support ResizeObserver natively](https://caniuse.com/?search=ResizeObserver). You can also use [polyfill](#resizeobserver-polyfill) for full browser support.\n\n### Basic Use Case\n\nTo report the size of an element by the `width` and `height` states.\n\n```js\nimport useDimensions from \"react-cool-dimensions\";\n\nconst App = () =\u003e {\n  const { observe, unobserve, width, height, entry } = useDimensions({\n    onResize: ({ observe, unobserve, width, height, entry }) =\u003e {\n      // Triggered whenever the size of the target is changed...\n\n      unobserve(); // To stop observing the current target element\n      observe(); // To re-start observing the current target element\n    },\n  });\n\n  return (\n    \u003cdiv ref={observe}\u003e\n      Hi! My width is {width}px and height is {height}px\n    \u003c/div\u003e\n  );\n};\n```\n\n\u003e 💡 You don't have to call `unobserve` when the component is unmounted, this hook will handle it for you.\n\n### Responsive Components\n\nWe have [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries) but those are based on the browser viewport not individual elements. In some cases, we'd like to style components based on the width of a containing element rather than the browser viewport. To meet this demand there's a [proposal](https://wicg.github.io/container-queries) for **container queries**, but it still doesn't exist today...\n\nNo worries, `react-cool-dimensions` provides an alternative solution for us! We can activate the **responsive mode** by the `breakpoints` option. It's a width-based solution, once it's activated we can easily apply different styles to a component according to the `currentBreakpoint` state. The overall concept as below.\n\nIf you wish to update the state on the breakpoints changed, you can set the `updateOnBreakpointChange` option to `true`.\n\n```js\nimport useDimensions from \"react-cool-dimensions\";\n\nconst Card = () =\u003e {\n  const { observe, currentBreakpoint } = useDimensions({\n    // The \"currentBreakpoint\" will be the object key based on the target's width\n    // for instance, 0px - 319px (currentBreakpoint = XS), 320px - 479px (currentBreakpoint = SM) and so on\n    breakpoints: { XS: 0, SM: 320, MD: 480, LG: 640 },\n    // Will only update the state on breakpoint changed, default is false\n    updateOnBreakpointChange: true,\n    onResize: ({ currentBreakpoint }) =\u003e {\n      // Now the event callback will be triggered when breakpoint is changed\n      // we can also access the \"currentBreakpoint\" here\n    },\n  });\n\n  return (\n    \u003cdiv class={`card ${currentBreakpoint}`} ref={observe}\u003e\n      \u003cdiv class=\"card-header\"\u003eI'm 😎\u003c/div\u003e\n      \u003cdiv class=\"card-body\"\u003eI'm 👕\u003c/div\u003e\n      \u003cdiv class=\"card-footer\"\u003eI'm 👟\u003c/div\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n\u003e Note: If the `breakpoints` option isn't set or there's no the defined breakpoint (object key) for a range of width. The `currentBreakpoint` will be empty string.\n\n## Conditionally Updating State\n\nYou can use the `shouldUpdate` option to conditionally update the state to reduce unnecessary re-renders as below.\n\n```js\nconst returnObj = useDimensions({\n  shouldUpdate: ({ currentBreakpoint, width, height, entry }) =\u003e {\n    // Will only update the state when the target element's width greater than 300px\n    return state.width \u003e 300;\n  },\n});\n```\n\n\u003e Note: When `updateOnBreakpointChange` and `shouldUpdate` are used at the same time, `shouldUpdate` has a higher priority.\n\n## Border-box Size Measurement\n\nBy default, the hook reports the `width` and `height` based on the [content rectangle](https://developers.google.com/web/updates/2016/10/resizeobserver#what_is_being_reported) of the target element. We can include the padding and border for measuring by the `useBorderBoxSize` option. Please note, the `width` and `height` states are rely on the [ResizeObserverEntry.borderBoxSize](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/borderBoxSize) but [it hasn't widely implemented by browsers](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/borderBoxSize#Browser_compatibility) therefore we need to use [polyfill](#resizeobserver-polyfill) for this feature.\n\n```js\nimport useDimensions from \"react-cool-dimensions\";\nimport { ResizeObserver } from \"@juggle/resize-observer\";\n\nconst App = () =\u003e {\n  const { observe, width, height } = useDimensions({\n    useBorderBoxSize: true, // Tell the hook to measure based on the border-box size, default is false\n    polyfill: ResizeObserver, // Use polyfill to make this feature works on more browsers\n  });\n\n  return (\n    \u003cdiv\n      style={{\n        width: \"100px\",\n        height: \"100px\",\n        padding: \"10px\",\n        border: \"5px solid grey\",\n      }}\n      ref={observe}\n    \u003e\n      {/* Now the width and height will be: 100px + 10px + 5px = 115px */}\n      Hi! My width is {width}px and height is {height}px\n    \u003c/div\u003e\n  );\n};\n```\n\n## How to Share A `ref`?\n\nYou can share a `ref` as follows:\n\n```js\nimport { useRef } from \"react\";\nimport useDimensions from \"react-cool-dimensions\";\n\nconst App = () =\u003e {\n  const ref = useRef();\n  const { observe } = useDimensions();\n\n  return (\n    \u003cdiv\n      ref={(el) =\u003e {\n        observe(el); // Set the target element for measuring\n        ref.current = el; // Share the element for other purposes\n      }}\n    /\u003e\n  );\n};\n```\n\n## Performance Optimization\n\nThe `onResize` event will be triggered whenever the size of the target element is changed. We can reduce the frequency of the event callback by activating the [responsive mode](#responsive-components) or implementing our own throttled/debounced function as below. Note that in order to throttle/debounce the function correctly, it will need to be memorized else it will be recreated on every render call.\n\n```js\nimport { useMemo } from \"react\";\nimport _ from \"lodash\";\n\nconst returnObj = useDimensions({\n  onResize: useMemo(\n    () =\u003e\n      _.throttle(() =\u003e {\n        // Triggered once per every 500 milliseconds\n      }, 500),\n    []\n  ),\n});\n```\n\n## Working in TypeScript\n\nThis hook supports [TypeScript](https://www.typescriptlang.org), you can tell the hook what type of element you are going to observe through the [generic type](https://www.typescriptlang.org/docs/handbook/generics.html):\n\n```ts\nconst App = () =\u003e {\n  const { observe } = useDimensions\u003cHTMLDivElement\u003e();\n\n  return \u003cdiv ref={observe} /\u003e;\n};\n```\n\n\u003e 💡 For more available types, please [check it out](src/react-cool-dimensions.d.ts).\n\n## API\n\n```js\nconst returnObj = useDimensions(options?: object);\n```\n\n### Return object\n\nIt's returned with the following properties.\n\n| Key                 | Type           | Default | Description                                                                                                            |\n| ------------------- | -------------- | ------- | ---------------------------------------------------------------------------------------------------------------------- |\n| `observe`           | function       |         | To set a target element for measuring or re-start observing the current target element.                                |\n| `unobserve`         | function       |         | To stop observing the current target element.                                                                          |\n| `width`             | number or null | null    | The width of the target element in pixel. Null while target has not mounted.                                           |\n| `height`            | number or null | null    | The height of the target element in pixel. Null while target has not mounted.Z                                         |\n| `currentBreakpoint` | string         |         | Indicates the current breakpoint of the [responsive components](#responsive-components).                               |\n| `entry`             | object         |         | The [ResizeObserverEntry](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry) of the target element. |\n\n### Parameter\n\nThe `options` provides the following configurations and event callback for you.\n\n| Key                        | Type           | Default | Description                                                                                                                                                                                   |\n| -------------------------- | -------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `breakpoints`              | object         |         | Activates the responsive mode for [responsive components](#responsive-components) or [performance optimization](#performance-optimization).                                                   |\n| `updateOnBreakpointChange` | boolean        | `false` | Tells the hook to update the state on breakpoint changed.                                                                                                                                     |\n| `useBorderBoxSize`         | boolean        | `false` | Tells the hook to [measure the target element based on the border-box size](#border-box-size-measurement).                                                                                    |\n| `shouldUpdate`             | function       |         | Tells the hook to [conditionally update the state](#conditionally-updating-state).                                                                                                            |\n| `onResize`                 | function       |         | It's invoked whenever the size of the target element is changed. But in [responsive mode](#responsive-components), it's invoked based on the changing of the breakpoint rather than the size. |\n| `polyfill`                 | ResizeObserver |         | It's used for [injecting a polyfill](#resizeobserver-polyfill).                                                                                                                               |\n\n## ResizeObserver Polyfill\n\n[ResizeObserver has good support amongst browsers](https://caniuse.com/?search=ResizeObserver), but it's not universal. You'll need to use polyfill for browsers that don't support it. Polyfills is something you should do consciously at the application level. Therefore `react-cool-dimensions` doesn't include it.\n\nWe recommend using [@juggle/resize-observer](https://github.com/juggle/resize-observer):\n\n```sh\n$ yarn add @juggle/resize-observer\n# or\n$ npm install --save @juggle/resize-observer\n```\n\nThen inject it by the `polyfill` option:\n\n```js\nimport { ResizeObserver } from \"@juggle/resize-observer\";\n\nconst { width, height } = useDimensions(ref, { polyfill: ResizeObserver });\n```\n\nOr pollute the `window` object:\n\n```js\nimport { ResizeObserver, ResizeObserverEntry } from \"@juggle/resize-observer\";\n\nif (!(\"ResizeObserver\" in window)) {\n  window.ResizeObserver = ResizeObserver;\n  // Only use it when you have this trouble: https://github.com/wellyshen/react-cool-dimensions/issues/45\n  // window.ResizeObserverEntry = ResizeObserverEntry;\n}\n```\n\nYou could use dynamic imports to only load the file when the polyfill is required:\n\n```js\n(async () =\u003e {\n  if (!(\"ResizeObserver\" in window)) {\n    const module = await import(\"@juggle/resize-observer\");\n    window.ResizeObserver = module.ResizeObserver;\n    // Only use it when you have this trouble: https://github.com/wellyshen/react-cool-dimensions/issues/45\n    // window.ResizeObserverEntry = module.ResizeObserverEntry;\n  }\n})();\n```\n\n## Articles / Blog Posts\n\n\u003e 💡 If you have written any blog post or article about `react-cool-dimensions`, please open a PR to add it here.\n\n- Featured on [React Status #191](https://react.statuscode.com/issues/191).\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\"\u003e\u003ca href=\"https://wellyshen.com\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/21308003?v=4?s=100\" width=\"100px;\" alt=\"Welly\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eWelly\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/wellyshen/react-cool-dimensions/commits?author=wellyshen\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/wellyshen/react-cool-dimensions/commits?author=wellyshen\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#maintenance-wellyshen\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003ca href=\"http://www.runarkristoffersen.com\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/5629981?v=4?s=100\" width=\"100px;\" alt=\"Runar Kristoffersen\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRunar Kristoffersen\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/wellyshen/react-cool-dimensions/commits?author=runar-rkmedia\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"https://github.com/wellyshen/react-cool-dimensions/commits?author=runar-rkmedia\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#ideas-runar-rkmedia\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003ca href=\"https://ricardoamaral.net\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/96476?v=4?s=100\" width=\"100px;\" alt=\"Ricardo Amaral\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRicardo Amaral\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/wellyshen/react-cool-dimensions/commits?author=rfgamaral\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/cornelius-behrend\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/77003328?v=4?s=100\" width=\"100px;\" alt=\"Cornelius\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eCornelius\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/wellyshen/react-cool-dimensions/issues?q=author%3Acornelius-behrend\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003ca href=\"http://hort.onl\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/17256474?v=4?s=100\" width=\"100px;\" alt=\"Joseph Horton\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJoseph Horton\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/wellyshen/react-cool-dimensions/commits?author=jhrtn\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/sirkrisp\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/43377824?v=4?s=100\" width=\"100px;\" alt=\"sirkrisp\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003esirkrisp\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/wellyshen/react-cool-dimensions/commits?author=sirkrisp\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwellyshen%2Freact-cool-dimensions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwellyshen%2Freact-cool-dimensions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwellyshen%2Freact-cool-dimensions/lists"}