{"id":33211591,"url":"https://github.com/metabolize/react-flexbox-svg","last_synced_at":"2025-12-30T08:13:08.927Z","repository":{"id":37693020,"uuid":"83504701","full_name":"metabolize/react-flexbox-svg","owner":"metabolize","description":"Flexbox for SVG in React, using css-layout","archived":false,"fork":false,"pushed_at":"2023-03-04T03:32:21.000Z","size":2119,"stargazers_count":8,"open_issues_count":31,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-06T01:54:27.085Z","etag":null,"topics":["flexbox","layout","react","react-component","svg"],"latest_commit_sha":null,"homepage":"https://react-flexbox-svg.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/metabolize.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}},"created_at":"2017-03-01T02:58:44.000Z","updated_at":"2025-05-26T17:21:13.000Z","dependencies_parsed_at":"2024-01-13T09:36:23.268Z","dependency_job_id":"452dcbb2-8c38-468f-abd1-9256aa0e722f","html_url":"https://github.com/metabolize/react-flexbox-svg","commit_stats":null,"previous_names":["paulmelnikow/react-flexbox-svg"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/metabolize/react-flexbox-svg","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metabolize%2Freact-flexbox-svg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metabolize%2Freact-flexbox-svg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metabolize%2Freact-flexbox-svg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metabolize%2Freact-flexbox-svg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/metabolize","download_url":"https://codeload.github.com/metabolize/react-flexbox-svg/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metabolize%2Freact-flexbox-svg/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":285560056,"owners_count":27192467,"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","status":"online","status_checked_at":"2025-11-21T02:00:06.175Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["flexbox","layout","react","react-component","svg"],"created_at":"2025-11-16T12:00:19.706Z","updated_at":"2025-11-21T05:03:13.151Z","avatar_url":"https://github.com/metabolize.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# react-flexbox-svg\n\n[![version](https://img.shields.io/npm/v/react-flexbox-svg.svg?style=flat-square)][npm]\n[![license](https://img.shields.io/npm/l/react-flexbox-svg.svg?style=flat-square)][npm]\n[![build](https://img.shields.io/circleci/project/github/metabolize/react-flexbox-svg.svg?style=flat-square)][build]\n[![code style](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)][prettier]\n\n[npm]: https://www.npmjs.com/package/react-flexbox-svg\n[build]: https://circleci.com/gh/metabolize/react-flexbox-svg/tree/master\n[prettier]: https://prettier.io/\n\nFlexbox for SVG in React, using [css-layout][].\n\ncss-layout is Facebook's JavaScript reimplementation of CSS which is now part\nof [Yoga][].\n\nBased on [react-flexbox-svg][dlmanning/react-flexbox-svg] by\n[David Manning][dlmanning].\n\n[css-layout]: https://www.npmjs.com/package/css-layout\n[yoga]: https://facebook.github.io/yoga/\n[dlmanning/react-flexbox-svg]: https://github.com/dlmanning/react-flexbox-svg\n[dlmanning]: https://github.com/dlmanning\n\n## Features\n\n- Define item layout statically or compute it from props.\n- Render layout rectangles for debugging (visible or not).\n- Pass layout into child props if needed.\n- No magic.\n- ES7 decorator ready.\n\n## Usage\n\n```jsx\nimport React from 'react'\nimport { FlexContext, FlexContainer } from 'react-flexbox-svg'\n\nclass StackedItemCollection extends React.Component {\n  render() {\n    return (\n      \u003csvg width=\"800\" height=\"600\"\u003e\n        \u003cFlexContext\u003e\n          \u003cFlexContainer style={{ flexDirection: 'column' }}\u003e\n            \u003cItem key=\"1\" /\u003e\n            \u003cItem key=\"2\" /\u003e\n            \u003cItem key=\"3\" /\u003e\n          \u003c/FlexContainer\u003e\n        \u003c/FlexContext\u003e\n      \u003c/svg\u003e\n    )\n  }\n}\n```\n\n```jsx\nclass Item extends React.Component {\n  render() {\n    const { height } = Item.layout\n\n    return \u003crect height={height} width=\"100%\" stroke=\"black\" strokeWidth=\"3\" /\u003e\n  }\n}\nItem.layout = { margin: 25, height: 50 }\n\nexport default layoutable(props =\u003e Item.layout)(Item)\n```\n\nAs a functional component:\n\n```jsx\nconst Item = layoutable(props =\u003e ({ margin: 10, height: 50 }))(() =\u003e (\n  \u003crect height=\"50\" width=\"100%\" stroke=\"black\" strokeWidth=\"3\" /\u003e\n))\n```\n\nUsing ES7 decorators:\n\n```jsx\n@layoutable(props =\u003e Item.layout)\nclass Item extends React.Component {\n  render() {\n    const { height } = Item.layout\n\n    return \u003crect height={height} width=\"100%\" stroke=\"black\" strokeWidth=\"3\" /\u003e\n  }\n}\nItem.layout = { margin: 10, height: 100 }\n```\n\nIn the [examples](examples/) folder is a more interesting example featuring a\n[dynamic collection](examples/dynamic-collection.js).\n\n## Installation\n\n```sh\nnpm install --save babel-runtime react-flexbox-svg\n```\n\n## Contribute\n\n- Issue Tracker: https://github.com/metabolize/react-flexbox-svg/issues\n- Source Code: https://github.com/metabolize/react-flexbox-svg/\n\nPull requests welcome!\n\n## Support\n\nIf you are having issues, please let me know.\n\n## License\n\nThis projects is licensed under the ISC license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetabolize%2Freact-flexbox-svg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmetabolize%2Freact-flexbox-svg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetabolize%2Freact-flexbox-svg/lists"}