{"id":13497754,"url":"https://github.com/bvaughn/react-virtualized-auto-sizer","last_synced_at":"2026-01-05T05:13:52.924Z","repository":{"id":39608693,"uuid":"137773494","full_name":"bvaughn/react-virtualized-auto-sizer","owner":"bvaughn","description":"Standalone version of the AutoSizer component from react-virtualized","archived":false,"fork":false,"pushed_at":"2025-03-30T16:11:41.000Z","size":303,"stargazers_count":647,"open_issues_count":0,"forks_count":84,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-27T04:47:33.755Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/bvaughn.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"bvaughn","patreon":null,"open_collective":"brianvaughn","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"buy_me_a_coffee":"bvaughn","custom":null}},"created_at":"2018-06-18T15:53:48.000Z","updated_at":"2025-04-25T08:29:00.000Z","dependencies_parsed_at":"2024-01-17T01:04:30.106Z","dependency_job_id":"9784d262-8b95-473f-8197-601e345a4927","html_url":"https://github.com/bvaughn/react-virtualized-auto-sizer","commit_stats":{"total_commits":82,"total_committers":17,"mean_commits":4.823529411764706,"dds":0.3780487804878049,"last_synced_commit":"9f970c99fd53d7cb0908ad7d4de9982fdf63bd6e"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bvaughn%2Freact-virtualized-auto-sizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bvaughn%2Freact-virtualized-auto-sizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bvaughn%2Freact-virtualized-auto-sizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bvaughn%2Freact-virtualized-auto-sizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bvaughn","download_url":"https://codeload.github.com/bvaughn/react-virtualized-auto-sizer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251089408,"owners_count":21534512,"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-31T20:00:38.222Z","updated_at":"2026-01-05T05:13:52.883Z","avatar_url":"https://github.com/bvaughn.png","language":"TypeScript","readme":"# react-virtualized-auto-sizer\n\nStandalone version of the `AutoSizer` component from [`react-virtualized`](https://github.com/bvaughn/react-virtualized).\n\n### If you like this project, 🎉 [become a sponsor](https://github.com/sponsors/bvaughn/) or ☕ [buy me a coffee](http://givebrian.coffee/)\n\n## Install\n\n```bash\nnpm install --save react-virtualized-auto-sizer\n```\n\n## Documentation\n\n\n| Property      | Type     | Required? | Description                                                                                                                                                     |\n| :------------ | :------- | :-------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| children      | Function |     ✓     | Function responsible for rendering children. This function should implement the following signature: `({ height?: number \\| undefined, width?: number \\| undefined }) =\u003e PropTypes.element` |\n| className     | String   |           | Optional custom CSS class name to attach to root `AutoSizer` element. This is an advanced property and is not typically necessary.                              |\n| defaultHeight | Number   |           | Height passed to child for initial render; useful for server-side rendering. This value will be overridden with an accurate height after mounting.              |\n| defaultWidth  | Number   |           | Width passed to child for initial render; useful for server-side rendering. This value will be overridden with an accurate width after mounting.                |\n| disableHeight | Boolean  |           | Fixed `height`; if specified, the child's `height` property will not be managed                                                                                 |\n| disableWidth  | Boolean  |           | Fixed `width`; if specified, the child's `width` property will not be managed                                                                                   |\n| doNotBailOutOnEmptyChildren | boolean | | Optional propr that can override default behavior of not rendering children when either `width` or `height` are 0 |\n| nonce         | String   |           | Nonce of the inlined stylesheets for [Content Security Policy](https://www.w3.org/TR/2016/REC-CSP2-20161215/#script-src-the-nonce-attribute)                    |\n| onResize      | Function |           | Callback to be invoked on-resize; it is passed the following named parameters: `({ height: number, width: number })`.                                           |\n| style         | Object   |           | Optional custom inline style to attach to root `AutoSizer` element. This is an advanced property and is not typically necessary.                                |\n| tagName       | string   |           | Optional HTML tag name for root element; defaults to `\"div\"` |\n\n## Examples\n\nSome components (like those found in [`react-window`](https://github.com/bvaughn/react-window) or [`react-virtualized`](https://github.com/bvaughn/react-virtualized)) require numeric width and height parameters. The `AutoSizer` component can be useful if you want to pass percentage based dimensions.\n\n```jsx\nimport AutoSizer from \"react-virtualized-auto-sizer\";\n\n// UI\n\u003cAutoSizer\u003e\n  {({ height, width }) =\u003e {\n    // Use these actual sizes to calculate your percentage based sizes\n  }}\n\u003c/AutoSizer\u003e;\n```\n\n## FAQs\n\n### Can I use this component with flexbox?\n\nFlex containers don't prevent their children from growing and `AutoSizer` greedily grows to fill as much space as possible. Combining the two can be problematic. The simple way to fix this is to nest `AutoSizer` inside of a `block` element (like a `\u003cdiv\u003e`) rather than putting it as a direct child of the flex container, like so:\n\n```jsx\n\u003cdiv style={{ display: 'flex' }}\u003e\n  \u003c!-- Other children... --\u003e\n  \u003cdiv style={{ flex: '1 1 auto' }}\u003e\n    \u003cAutoSizer\u003e\n      {({ height, width }) =\u003e (\n        \u003cComponent\n          width={width}\n          height={height}\n          {...props}\n        /\u003e\n      )}\n    \u003c/AutoSizer\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Why is `AutoSizer` passing a height of 0?\n\n`AutoSizer` expands to _fill_ its parent but it will not _stretch_ the parent. This is done to prevent problems with flexbox layouts. If `AutoSizer` is reporting a height (or width) of 0- then it's likely that the parent element (or one of its parents) has a height of 0.\n\nThe solution to this problem is often to add `height: 100%` or `flex: 1` to the parent. One easy way to test this is to add a style property (eg `background-color: red;`) to the parent to visually confirm that it is the expected size.\n\n### Can I use `AutoSizer` to manage only width or height (not both)?\n\nYou can use `AutoSizer` to control only one dimension of its child component using the `disableHeight` or `disableWidth` attributes. For example, a fixed-height component that should grow to fill the available width can be created like so:\n\n```jsx\n\u003cAutoSizer disableHeight\u003e\n  {({width}) =\u003e \u003cComponent height={200} width={width} {...props} /\u003e}\n\u003c/AutoSizer\u003e\n```\n\n\n### Module parsing fails because of an unexpected token?\n\nThis package targets [ECMAScript 2015](https://262.ecma-international.org/6.0/) (ES6) and requires a build tool such as [babel-loader](https://www.npmjs.com/package/babel-loader) that is capable of parsing the ES6 `class` syntax.\n\n### Can this component work with a Content Security Policy?\n\n[The specification of Content Security Policy](https://www.w3.org/TR/2016/REC-CSP2-20161215/#intro)\ndescribes as the following:\n\n\u003e This document defines Content Security Policy, a mechanism web applications\n\u003e can use to mitigate a broad class of content injection vulnerabilities, such\n\u003e as cross-site scripting (XSS).\n\nTo apply Content Security Policy, pass a `nonce` to `AutoSizer` and add a matching `nonce-source` to the `Content-Security-Policy` field in HTTP header.\n","funding_links":["https://github.com/sponsors/bvaughn","https://opencollective.com/brianvaughn","https://buymeacoffee.com/bvaughn","https://github.com/sponsors/bvaughn/"],"categories":["[React](https://github.com/facebook/react/)","React Virtualization"],"sub_categories":["React Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbvaughn%2Freact-virtualized-auto-sizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbvaughn%2Freact-virtualized-auto-sizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbvaughn%2Freact-virtualized-auto-sizer/lists"}