{"id":28092565,"url":"https://github.com/niexq/react-auto-sizer","last_synced_at":"2025-05-13T13:20:20.363Z","repository":{"id":40651867,"uuid":"397190579","full_name":"niexq/react-auto-sizer","owner":"niexq","description":"🧗‍♂️ 自动计算宽高的react组件（React components that automatically calculate width and height）","archived":false,"fork":false,"pushed_at":"2024-06-18T07:13:18.000Z","size":2827,"stargazers_count":6,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-04T02:02:49.435Z","etag":null,"topics":["auto-sizer","react-resizeobserver","resizeobserver"],"latest_commit_sha":null,"homepage":"https://niexq.github.io/react-auto-sizer/zh-CN","language":"JavaScript","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/niexq.png","metadata":{"files":{"readme":"README.en-US.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","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}},"created_at":"2021-08-17T09:28:21.000Z","updated_at":"2024-06-22T00:52:21.000Z","dependencies_parsed_at":"2023-02-18T13:15:38.104Z","dependency_job_id":"592ce5b7-7c76-4f8a-9b87-e09f0608917c","html_url":"https://github.com/niexq/react-auto-sizer","commit_stats":{"total_commits":52,"total_committers":2,"mean_commits":26.0,"dds":0.3076923076923077,"last_synced_commit":"1092cb1bf0fe4827dd2fdf5feec6f9c16041ff53"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/niexq%2Freact-auto-sizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/niexq%2Freact-auto-sizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/niexq%2Freact-auto-sizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/niexq%2Freact-auto-sizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/niexq","download_url":"https://codeload.github.com/niexq/react-auto-sizer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253948512,"owners_count":21988962,"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":["auto-sizer","react-resizeobserver","resizeobserver"],"created_at":"2025-05-13T13:20:19.856Z","updated_at":"2025-05-13T13:20:20.348Z","avatar_url":"https://github.com/niexq.png","language":"JavaScript","funding_links":["https://opencollective.com/react-auto-sizer/organization/0/website"],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://niexq.github.io/react-auto-sizer\"\u003e\n    \u003cimg width=\"100\" src=\"https://raw.githubusercontent.com/niexq/picbed/main/picgo/react-auto-size-logo-new.png\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eWelcome to react-auto-sizer 👋\u003c/h1\u003e\n\u003cp\u003e\n  \u003cimg alt=\"Version\" src=\"https://img.shields.io/npm/v/@oyyds/react-auto-sizer.svg\" /\u003e\n  \u003ca href=\"https://github.com/niexq/react-auto-sizer#readme\" target=\"_blank\"\u003e\n    \u003cimg alt=\"Documentation\" src=\"https://img.shields.io/badge/documentation-yes-brightgreen.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/niexq/react-auto-sizer/graphs/commit-activity\" target=\"_blank\"\u003e\n    \u003cimg alt=\"Maintenance\" src=\"https://img.shields.io/badge/Maintained%3F-yes-green.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://standardjs.com\" target=\"_blank\"\u003e\n    \u003cimg alt=\"Maintenance\" src=\"https://img.shields.io/badge/code_style-standard-brightgreen.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/niexq/react-auto-sizer/blob/main/LICENSE\" target=\"_blank\"\u003e\n    \u003cimg alt=\"License: MIT\" src=\"https://img.shields.io/github/license/niexq/react-auto-sizer\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://gitmoji.dev\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/gitmoji-%20😜%20😍-FFDD67.svg?style=flat-square\" alt=\"Gitmoji\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003e React components that automatically calculate width and height\n\n[ 简体中文 ](./README.md) | English\n\n### 🏠 [Homepage](https://niexq.github.io/react-auto-sizer)\n\n![](https://raw.githubusercontent.com/niexq/picbed/main/picgo/react-auto-sizer-en-US.gif)\n\n### 📦 Install\n\n```bash\n  yarn add @oyyds/react-auto-sizer  # or npm i @oyyds/react-auto-sizer -S\n```\n\n### 🔨 Use\n\n```tsx | pure\nimport AutoSizer from '@oyyds/react-auto-sizer';\n\nconst AutoSizeComponent = () =\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003cAutoSizer\u003e\n        {({ width, height }) =\u003e (\n          \u003cdiv\n            style={{\n              width,\n              height,\n            }}\n          \u003e\n            Content area\n          \u003c/div\u003e\n        )}\n      \u003c/AutoSizer\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n## 🦧 Author\n\n- Website: https://juejin.cn/user/4318537404123688/posts\n- Github: [@niexq](https://github.com/niexq)\n\n## 🤝 Contributing\n\nContributions, issues and feature requests are welcome!\u003cbr /\u003eFeel free to check [issues page](https://github.com/niexq/react-auto-sizer/issues).\n\n\u003c!-- \u003ca href=\"https://opencollective.com/react-auto-sizer/organization/0/website\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/16329407?s=48\u0026v=4\"\u003e\u003c/a\u003e --\u003e\n\n## ❤️ Show your support\n\nGive a ⭐️ if this project helped you!\n\n## 📝 License\n\nThis project is [MIT](https://github.com/niexq/react-auto-sizer/blob/main/LICENSE) licensed.\n\n## 🐳 Link\n\n[react-virtualized-auto-sizer](https://github.com/bvaughn/react-virtualized-auto-sizer)\u003cbr /\u003e [ResizeObserver](https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver)\n\n## 🌐 Browsers support\n\n| \u003cimg src=\"https://raw.githubusercontent.com/niexq/picbed/main/picgo/chrome-logo.png\" alt=\"Chrome\" width=\"24px\" height=\"24px\" /\u003e\u003cbr/\u003eChrome | \u003cimg src=\"https://raw.githubusercontent.com/niexq/picbed/main/picgo/edge-logo.png\" alt=\"IE / Edge\" width=\"24px\" height=\"24px\" /\u003e\u003cbr/\u003e Edge | \u003cimg src=\"https://raw.githubusercontent.com/niexq/picbed/main/picgo/firefox-logo.png\" alt=\"Firefox\" width=\"24px\" height=\"24px\" /\u003e\u003cbr/\u003eFirefox | \u003cimg src=\"https://raw.githubusercontent.com/niexq/picbed/main/picgo/ie-logo.png\" alt=\"Safari\" width=\"24px\" height=\"24px\" /\u003e\u003cbr/\u003eInternet Explorer | \u003cimg src=\"https://raw.githubusercontent.com/niexq/picbed/main/picgo/opera-logo.png\" alt=\"Opera\" width=\"24px\" height=\"24px\" /\u003e\u003cbr/\u003eOpera | \u003cimg src=\"https://raw.githubusercontent.com/niexq/picbed/main/picgo/safari-logo.png\" alt=\"Safari\" width=\"24px\" height=\"24px\" /\u003e\u003cbr/\u003eSafari | \u003cimg src=\"https://raw.githubusercontent.com/niexq/picbed/main/picgo/android-logo.png\" alt=\"Safari\" width=\"24px\" height=\"24px\" /\u003e\u003cbr/\u003eWebView Android | \u003cimg src=\"https://raw.githubusercontent.com/niexq/picbed/main/picgo/chrome-logo.png\" alt=\"Chrome\" width=\"24px\" height=\"24px\" /\u003e\u003cbr/\u003eChrome Android | \u003cimg src=\"https://raw.githubusercontent.com/niexq/picbed/main/picgo/firefox-logo.png\" alt=\"Firefox\" width=\"24px\" height=\"24px\" /\u003e\u003cbr/\u003eFirefox Android | \u003cimg src=\"https://raw.githubusercontent.com/niexq/picbed/main/picgo/opera-logo.png\" alt=\"Opera\" width=\"24px\" height=\"24px\" /\u003e\u003cbr/\u003eOpera Android | \u003cimg src=\"https://raw.githubusercontent.com/niexq/picbed/main/picgo/safari-logo.png\" alt=\"Safari\" width=\"24px\" height=\"24px\" /\u003e\u003cbr/\u003eSafari iOS | \u003cimg src=\"https://raw.githubusercontent.com/niexq/picbed/main/picgo/samsung-logo.png\" alt=\"Samsung\" width=\"24px\" height=\"24px\" /\u003e\u003cbr/\u003eSamsung Internet |\n| :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: |\n| 64 | 79 | 69 | ❌ | 51 | 13.1 | 64 | 64 | 79 | 47 | 13.4 | 9.0 |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fniexq%2Freact-auto-sizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fniexq%2Freact-auto-sizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fniexq%2Freact-auto-sizer/lists"}