{"id":21280255,"url":"https://github.com/zalando-stups/react-automatic-width","last_synced_at":"2025-07-11T09:31:47.450Z","repository":{"id":57170292,"uuid":"44966067","full_name":"zalando-stups/react-automatic-width","owner":"zalando-stups","description":"Automatically sets `width` property on child components","archived":false,"fork":false,"pushed_at":"2019-04-10T09:26:57.000Z","size":74,"stargazers_count":10,"open_issues_count":2,"forks_count":3,"subscribers_count":17,"default_branch":"master","last_synced_at":"2024-11-11T21:05:03.201Z","etag":null,"topics":["listener","react","resize-observer"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zalando-stups.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-10-26T12:10:37.000Z","updated_at":"2019-06-24T15:33:11.000Z","dependencies_parsed_at":"2022-08-27T13:11:43.561Z","dependency_job_id":null,"html_url":"https://github.com/zalando-stups/react-automatic-width","commit_stats":null,"previous_names":["zalando/react-automatic-width"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zalando-stups%2Freact-automatic-width","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zalando-stups%2Freact-automatic-width/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zalando-stups%2Freact-automatic-width/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zalando-stups%2Freact-automatic-width/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zalando-stups","download_url":"https://codeload.github.com/zalando-stups/react-automatic-width/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225711971,"owners_count":17512314,"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":["listener","react","resize-observer"],"created_at":"2024-11-21T10:29:02.852Z","updated_at":"2024-11-21T10:29:03.496Z","avatar_url":"https://github.com/zalando-stups.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-automatic-width\n\n[![Build Status](https://travis-ci.org/zalando/react-automatic-width.svg?branch=master)](https://travis-ci.org/zalando/react-automatic-width) [![Coverage Status](https://coveralls.io/repos/github/zalando/react-automatic-width/badge.svg?branch=master)](https://coveralls.io/github/zalando/react-automatic-width?branch=master)\n\nSo, you found those cool components like [fixed-data-table](https://facebook.github.io/fixed-data-table/) and [react-d3-components](https://github.com/codesuki/react-d3-components) that do whatever you want, with just one problem: They only work on fixed width! You care about responsiveness and different display sizes. You want variable width! **HULK SMASH!**\n\nOne solution: Just wrap it in `AutoWidth`, so that this:\n\n~~~ jsx\nimport D3 from 'react-d3-components';\n\n\u003cD3.BarChart\n    width={500} /\u003e // ;_;\n~~~\n\nCan work like this:\n\n~~~ jsx\nimport D3 from 'react-d3-components';\nimport AutoWidth from '@zalando/react-automatic-width';\n\n\u003cAutoWidth\u003e\n    \u003cD3.BarChart /\u003e {/* ^_^ */}\n\u003c/AutoWidth\u003e\n~~~\n\nreact-automatic-width is a React component that automatically sets `width` property on child components. It works out-of-the-box and accepts any property you throw at it. This way, you can use classes and media queries for the autowidth container.\n\nIt does its job by attaching a listener to the `resize` event of `window`. In it, react-automatic-width reads the current width of its DOM node and sets this as the `width` property on its children. Since it creates an event listener *every* time it's used, you might want to reconsider when you have a lot of components that need to be wrapped separately. [`react-dimensions`](https://github.com/digidem/react-dimensions) might then be useful to you as it offers the option to use [`element-resize-event`](https://github.com/KyleAMathews/element-resize-event/) underneath (using `requestAnimationFrame`).\n\nIt's currently not under active development because the codebase is tiny and works. If appropriate, it will be updated to accomodate future React versions.\n\n## Installation \u0026 Usage\n\nInstall react-automatic-width with:\n\n    npm i -S @zalando/react-automatic-width\n\nThen load it however you want (example: ES6):\n\n    import AutoWidth from '@zalando/react-automatic-width'\n\nFinally, omit the `width` property on your component and wrap it in `AutoWidth`:\n\n~~~ jsx\n    \u003cAutoWidth className=\"responsive\"\u003e\n        \u003cD3.BarChart /\u003e\n    \u003c/AutoWidth\u003e\n~~~\n\nOptionally, you can set up the debouncing rate in milliseconds (default is 100)\n~~~ jsx\n    \u003cAutoWidth className=\"responsive\" debounceWait={150}\u003e\n        \u003cD3.BarChart /\u003e\n    \u003c/AutoWidth\u003e\n~~~\n\n## Issues/Contributing\n\nThis project welcomes contributions from the community. Here are some issues and areas where we could use some help:\n\n* Uses `clientWidth` because that worked in Chrome forty-something. Might be funky in your browser. PRs welcome.\n* Not clear what should happen if the window is resized while the container is not displayed. Currently zero-widths just get ignored. Drop a line via the Issues tracker if you have some ideas.\n\n## License\n\nApache 2.0\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzalando-stups%2Freact-automatic-width","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzalando-stups%2Freact-automatic-width","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzalando-stups%2Freact-automatic-width/lists"}