{"id":13422374,"url":"https://github.com/digidem/react-dimensions","last_synced_at":"2025-05-16T06:07:54.874Z","repository":{"id":1070719,"uuid":"38952081","full_name":"digidem/react-dimensions","owner":"digidem","description":"[Looking for maintainers]","archived":false,"fork":false,"pushed_at":"2018-05-03T17:02:20.000Z","size":209,"stargazers_count":450,"open_issues_count":29,"forks_count":78,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-05-10T04:20:59.310Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://lab.digital-democracy.org/react-dimensions/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/digidem.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-07-12T06:12:54.000Z","updated_at":"2024-10-08T10:18:54.000Z","dependencies_parsed_at":"2022-08-09T03:02:00.703Z","dependency_job_id":null,"html_url":"https://github.com/digidem/react-dimensions","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digidem%2Freact-dimensions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digidem%2Freact-dimensions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digidem%2Freact-dimensions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digidem%2Freact-dimensions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/digidem","download_url":"https://codeload.github.com/digidem/react-dimensions/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254478193,"owners_count":22077676,"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":[],"created_at":"2024-07-30T23:00:43.060Z","updated_at":"2025-05-16T06:07:49.819Z","avatar_url":"https://github.com/digidem.png","language":"JavaScript","readme":"# react-dimensions\n\nReact [higher-order component](https://gist.github.com/sebmarkbage/ef0bf1f338a7182b6775) to get the dimensions of a wrapper element and pass them as properties to the child element.\n\n**DEVELOPMENT STATUS:** I'm not really using this any more since for grids/tables in React I've switched from [fixed-data-table](https://github.com/facebook/fixed-data-table) (which I was using this for) to [react-virtualized](https://github.com/bvaughn/react-virtualized) which includes similar functionality to this with the [Autosizer](https://bvaughn.github.io/react-virtualized/#/components/AutoSizer). I'm happy for someone else to take this module on.\n\n**v2.0.0-alpha1:** Includes several breaking changes, most importantly changing the way dimensions are calculated. The parent container is now used for width calculations, and the wrapper div inside this component is ignored. Hopefully this will solve the multiple styling issues users have had, but it will break layout in apps using v1.2.0\n\n## Why? How?\n\nSome React components require a width to be set in pixels, and cannot be set to `100%`. This is a challenge for responsive design. This component measures the size of the parent node, and then passes these dimensions to your component.\n\n## Installation\n\nRequires [nodejs](http://nodejs.org/).\n\n```sh\n$ npm install react-dimensions\n```\n\nTo install the pre-release version:\n\n```sh\n$ npm install react-dimensions@next\n```\n\n## API\n\n### Dimensions([options])(MyComponent)\n\nWraps a react component and adds properties `containerHeight` and\n`containerWidth`. Useful for responsive design. Properties update on\nwindow resize. **Note** that the parent element must have either a\nheight or a width, or nothing will be rendered\n\nCan be used as a\n[higher-order component](http://babeljs.io/blog/2015/06/07/react-on-es6-plus/#property-initializers)\nor as an [ES7 class decorator](https://github.com/wycats/javascript-decorators)\n(see examples)\n\n**Parameters**\n\n-   `options` **[object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)=**\n    -   `options.getHeight` **[function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)=** A function that is passed an element and returns element\n        height, where element is the wrapper div. Defaults to `(element) =\u003e element.clientHeight`\n    -   `options.getWidth` **[function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)=** A function that is passed an element and returns element\n        width, where element is the wrapper div. Defaults to `(element) =\u003e element.clientWidth`\n    -   `options.debounce` **\\[[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)]** Optionally debounce the `onResize` callback function by\n        supplying the delay time in milliseconds. This will prevent excessive dimension\n        updates. See \u003chttps://lodash.com/docs#debounce\u003e for more information. Defaults to `0`, which disables debouncing.\n    -   `options.debounceOpts` **\\[[object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)]** Options to pass to the debounce function. See\n        \u003chttps://lodash.com/docs#debounce\u003e for all available options. Defaults to `{}`.\n    -   `options.containerStyle` **[object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)=** A style object for the `\u003cdiv\u003e` that will wrap your component.\n        If you are using a flexbox layout you will need to style this `div` rather than your wrapped component (because flexbox only works with direct children). The default style is\n        `{ margin: 0, padding: 0, border: 0 }`.\n    -   `options.className` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)=** Control the class name set on the wrapper `\u003cdiv\u003e`\n    -   `options.elementResize` **[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)=** Set true to watch the wrapper `div` for changes in\n        size which are not a result of window resizing - e.g. changes to the flexbox and other layout. (optional, default `false`)\n\n**Examples**\n\n```javascript\n// ES2015\nimport React from 'react'\nimport Dimensions from 'react-dimensions'\n\nclass MyComponent extends React.Component {\n  render() (\n    \u003cdiv\n      containerWidth={this.props.containerWidth}\n      containerHeight={this.props.containerHeight}\n    \u003e\n    \u003c/div\u003e\n  )\n}\n\nexport default Dimensions()(MyComponent) // Enhanced component\n```\n\n```javascript\n// ES5\nvar React = require('react')\nvar Dimensions = require('react-dimensions')\n\nvar MyComponent = React.createClass({\n  render: function() {(\n    \u003cdiv\n      containerWidth={this.props.containerWidth}\n      containerHeight={this.props.containerHeight}\n    \u003e\n    \u003c/div\u003e\n  )}\n}\n\nmodule.exports = Dimensions()(MyComponent) // Enhanced component\n```\n\nReturns **[function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)** A higher-order component that can be\nused to enhance a react component `Dimensions()(MyComponent)`\n\n### getWrappedInstance()\n\nReturns the underlying wrapped component instance.\nUseful if you need to access a method or property of the component\npassed to react-dimensions. Does not currently work for stateless function components see [#30](https://github.com/digidem/react-dimensions/issues/30)\n\nReturns **[object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** The wrapped React component instance\n\n## Live Example\n\nWill open a browser window for localhost:9966\n\n`npm i \u0026\u0026 npm i react react-dom \u0026\u0026 npm start`\n\n## Tests\n\n```sh\n$ npm test\n```\n","funding_links":[],"categories":["UI Utilities","Uncategorized","UI Utilites","JavaScript","Removed components"],"sub_categories":["Reporter","Uncategorized","Miscellaneous"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdigidem%2Freact-dimensions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdigidem%2Freact-dimensions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdigidem%2Freact-dimensions/lists"}