{"id":16417085,"url":"https://github.com/tkrotoff/flex-wrap-layout","last_synced_at":"2025-07-18T06:33:12.394Z","repository":{"id":35798886,"uuid":"40080401","full_name":"tkrotoff/flex-wrap-layout","owner":"tkrotoff","description":"Detect flex-wrap via JavaScript","archived":false,"fork":false,"pushed_at":"2023-03-11T01:54:37.000Z","size":6466,"stargazers_count":20,"open_issues_count":2,"forks_count":1,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-07-13T09:43:47.237Z","etag":null,"topics":["flex-wrap","flexbox"],"latest_commit_sha":null,"homepage":"","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/tkrotoff.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"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":"2015-08-02T13:37:23.000Z","updated_at":"2024-10-02T15:14:27.000Z","dependencies_parsed_at":"2024-11-01T16:31:48.729Z","dependency_job_id":null,"html_url":"https://github.com/tkrotoff/flex-wrap-layout","commit_stats":{"total_commits":178,"total_committers":1,"mean_commits":178.0,"dds":0.0,"last_synced_commit":"c6b6c082508bc4df4cd6919fb25a8993242a78da"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"purl":"pkg:github/tkrotoff/flex-wrap-layout","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tkrotoff%2Fflex-wrap-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tkrotoff%2Fflex-wrap-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tkrotoff%2Fflex-wrap-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tkrotoff%2Fflex-wrap-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tkrotoff","download_url":"https://codeload.github.com/tkrotoff/flex-wrap-layout/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tkrotoff%2Fflex-wrap-layout/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265710672,"owners_count":23815398,"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":["flex-wrap","flexbox"],"created_at":"2024-10-11T07:10:58.577Z","updated_at":"2025-07-18T06:33:12.371Z","avatar_url":"https://github.com/tkrotoff.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# flex-wrap-layout\n\n[![npm version](https://badge.fury.io/js/flex-wrap-layout.svg)](https://www.npmjs.com/package/flex-wrap-layout)\n[![Node.js CI](https://github.com/tkrotoff/flex-wrap-layout/workflows/Node.js%20CI/badge.svg)](https://github.com/tkrotoff/flex-wrap-layout/actions)\n[![Bundle size](https://badgen.net/bundlephobia/minzip/flex-wrap-layout)](https://bundlephobia.com/result?p=flex-wrap-layout)\n[![Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n[![Airbnb Code Style](https://badgen.net/badge/code%20style/airbnb/ff5a5f?icon=airbnb)](https://github.com/airbnb/javascript)\n\nDetects flex-wrap via JavaScript ([unfortunately not possible in CSS](https://stackoverflow.com/q/40012428)).\n\n[`detectWrappedElements()`](src/detectWrappedElements.ts) and [`useDetectWrappedElements()`](src/useDetectWrappedElements.ts) are JavaScript functions that detect when elements are wrapped and let you [define the CSS](src/detectWrappedElements.scss) that goes with it.\n\nThis allows for responsive UIs without hardcoded CSS (width, min-width, media queries...) using the \"natural\" width of elements instead.\n\n- With `detectWrappedElements()`:\n\n![Minimal example with detectWrappedElements()](examples/Minimal-detectWrappedElements.gif)\n\n- Without:\n\n![Minimal example without detectWrappedElements()](examples/Minimal.gif)\n\n## Usage\n\n`npm install flex-wrap-layout`\n\n```JS\nimport { useRef } from 'react';\n\nimport { useDetectWrappedElements, wrapChildrenClassName } from 'flex-wrap-layout';\nimport 'flex-wrap-layout/src/detectWrappedElements.scss';\n\nconst boxStyle = {\n  border: '1px solid',\n  height: 60,\n  margin: 5,\n  padding: 5\n};\n\nfunction MyComponent() {\n  const ref = useRef(null);\n  useDetectWrappedElements(ref);\n\n  return (\n    \u003cdiv ref={ref} className={wrapChildrenClassName}\u003e\n      \u003cdiv style={boxStyle}\u003eParis\u003c/div\u003e\n      \u003cdiv style={{ ...boxStyle, flex: 'auto' }}\u003eLos Angeles\u003c/div\u003e\n      \u003cdiv style={boxStyle}\u003ePhnom Penh\u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## Examples\n\n- [Minimal example](examples/Minimal.tsx)\n- [Boxes example](examples/Boxes.tsx)\n- [Bootstrap example](examples/Bootstrap.tsx): https://codesandbox.io/s/github/tkrotoff/flex-wrap-layout/tree/codesandbox.io/examples\n\n## Limitations\n\nThis will cause reflows (layout thrashing): https://gist.github.com/paulirish/5d52fb081b3570c81e3a\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftkrotoff%2Fflex-wrap-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftkrotoff%2Fflex-wrap-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftkrotoff%2Fflex-wrap-layout/lists"}