{"id":25315013,"url":"https://github.com/cremalab/react-layout-views","last_synced_at":"2025-06-17T03:36:51.813Z","repository":{"id":57333751,"uuid":"109175015","full_name":"cremalab/react-layout-views","owner":"cremalab","description":"Easy layouts for React \u0026 React Native","archived":false,"fork":false,"pushed_at":"2018-08-24T22:37:34.000Z","size":1114,"stargazers_count":4,"open_issues_count":1,"forks_count":0,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-04-12T05:06:00.790Z","etag":null,"topics":["flexbox","layout","react","react-native","typescript"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/0yy71348nn","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cremalab.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-11-01T19:34:20.000Z","updated_at":"2018-06-21T19:29:48.000Z","dependencies_parsed_at":"2022-08-24T21:40:44.731Z","dependency_job_id":null,"html_url":"https://github.com/cremalab/react-layout-views","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"purl":"pkg:github/cremalab/react-layout-views","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cremalab%2Freact-layout-views","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cremalab%2Freact-layout-views/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cremalab%2Freact-layout-views/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cremalab%2Freact-layout-views/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cremalab","download_url":"https://codeload.github.com/cremalab/react-layout-views/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cremalab%2Freact-layout-views/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260286467,"owners_count":22986596,"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":["flexbox","layout","react","react-native","typescript"],"created_at":"2025-02-13T17:39:58.598Z","updated_at":"2025-06-17T03:36:51.790Z","avatar_url":"https://github.com/cremalab.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Layout Views\n\nEasy layouts for React \u0026 React Native\n\n[See live examples](https://codesandbox.io/s/0yy71348nn)\n\n## Why\n\nCreating UI layouts should be simple and declarative.\n\nThe aim of this library is to provide an intuitive API for composing layouts by abstracting away certain flex concepts like axis alignment and replacing these with more intuitive terms like `horizontal`, `bottom`, `right`, and `center`.\n\nAnother goal of this library is to provide consistent spacing between layout elements.\n\n## Examples\n\n[See live examples](https://codesandbox.io/s/0yy71348nn)\n\n### Horizontal\n\n```jsx\n// This example produces a horizontal layout where \n// each section is spaced by 20px and the first section is \n// pushing its siblings to the right.\n\n\u003cLayout horizontal spacing='20px'\u003e\n  \u003cSection grow\u003eContent 1\u003c/Section\u003e\n  \u003cSection\u003eContent 2\u003c/Section\u003e\n  \u003cSection\u003eContent 3\u003c/Section\u003e\n\u003c/Layout\u003e\n```\n\n### Nested Layouts\n\n```jsx\n// This example shows the previous example with\n// the addition of a nested layout contained\n// by the last section in the parent layout.\n\n\u003cLayout horizontal spacing='20px'\u003e\n  \u003cSection grow\u003eContent 1\u003c/Section\u003e\n  \u003cSection\u003eContent 2\u003c/Section\u003e\n  \u003cSection\u003e\n    \u003cLayout spacing='10px'\u003e\n      \u003cSection\u003eContent 1\u003c/Section\u003e\n      \u003cSection\u003eContent 2\u003c/Section\u003e\n      \u003cSection\u003eContent 3\u003c/Section\u003e\n    \u003c/Layout\u003e\n  \u003c/Section\u003e\n\u003c/Layout\u003e\n```\n\n### Styling\n\n```jsx\n// This example shows how styles may be applied\n// directly to `Layout` and `Section`.\n\n\u003cLayout horizontal spacing='20px' style={{background: 'red'}}\u003e // does not produce inline styles\n  \u003cSection grow\u003eContent 1\u003c/Section\u003e\n  \u003cSection\u003eContent 2\u003c/Section\u003e\n  \u003cSection style={{padding: '1em'}}\u003eContent 3\u003c/Section\u003e // does not produce inline styles\n\u003c/Layout\u003e\n```\n\n## Setup\n\n### Install\n```shell\n$ npm install react-layout-views\n```\n\n### Import\n```jsx\nimport { Layout, Section } from 'react-layout-views' // web\n\n// OR\n\nimport { Layout, Section } from 'react-layout-views/native' // native\n\n...\n```\n\n## API\n\n### `\u003cLayout /\u003e`\n\nA `Layout` wraps one or many `Section` components. By default child Sections are arranged vertically. Adding the `horizontal` prop arranges children across the X axis.\n\nSpacing between child Sections is set via the `spacing` prop as a CSS length for web or number for React Native. \n\nThe `grow` prop is used to define how a Section fills available space inside a `Layout`. Alignment props (e.g. `top`, `right`, etc.) may be combined to position content.\n\n#### Props\n\n\u003cdetails\u003e\n\u003csummary\u003e\n  \u003ccode\u003ebasis?: string | number\u003c/code\u003e\n\u003c/summary\u003e\n\n  - ideal width (flex-basis) of child Sections\n\n  \u003e By default, Layout will wrap Sections according to this value. On web, this can be any CSS length. Native accepts a number or percentage string.\n\u003c/details\u003e\n\u003cdetails\u003e\n\u003csummary\u003e\n  \u003ccode\u003ebottom?: boolean\u003c/code\u003e\n\u003c/summary\u003e\n\n  - align child Sections to bottom of available Layout area \n  - combine with `center`, `centerHorizontal`, `left`, `right`\n\u003c/details\u003e\n\u003cdetails\u003e\n\u003csummary\u003e\n  \u003ccode\u003ecenter?: boolean\u003c/code\u003e\n\u003c/summary\u003e\n\n  - align child Sections to center X and Y of available Layout area\n  - combine with `top`, `right`, `bottom`, `left`\n\u003c/details\u003e\n\u003cdetails\u003e\n\u003csummary\u003e\n  \u003ccode\u003ecenterHorizontal?: boolean\u003c/code\u003e\n\u003c/summary\u003e\n\n  - align child Sections on the X axis\n  - combine with `top`, `bottom`\n\u003c/details\u003e\n\u003cdetails\u003e\n\u003csummary\u003e\n  \u003ccode\u003ecenterVertical?: boolean\u003c/code\u003e\n\u003c/summary\u003e\n\n  - align child Sections on the Y axis\n  - combine with `left`, `right`\n\u003c/details\u003e\n\u003cdetails\u003e\n\u003csummary\u003e\n  \u003ccode\u003egrow?: boolean | number\u003c/code\u003e\n\u003c/summary\u003e\n\n  fill available space of parent Section or other flex element\n\u003c/details\u003e\n\u003cdetails\u003e\n\u003csummary\u003e\n  \u003ccode\u003ehorizontal?: boolean\u003c/code\u003e\n\u003c/summary\u003e\n\n  align child Sections horizontally\n\u003c/details\u003e\n\u003cdetails\u003e\n\u003csummary\u003e\n  \u003ccode\u003eleft?: boolean\u003c/code\u003e\n\u003c/summary\u003e\n\n  - align child Sections to the left\n  - combine with `top`, `bottom`, `center`, `centerVertical`\n\u003c/details\u003e\n\u003cdetails\u003e\n\u003csummary\u003e\n  \u003ccode\u003enoWrap?: boolean\u003c/code\u003e\n\u003c/summary\u003e\n\n  prevent default wrapping of `horizontal` Layout\n\u003c/details\u003e\n\u003cdetails\u003e\n\u003csummary\u003e\n  \u003ccode\u003ereverse?: boolean\u003c/code\u003e\n\u003c/summary\u003e\n\n  reverse order of child Sections\n\u003c/details\u003e\n\u003cdetails\u003e\n\u003csummary\u003e\n  \u003ccode\u003eright?: boolean\u003c/code\u003e\n\u003c/summary\u003e\n\n  - align child Sections to the right\n  - combine with `top`, `bottom`, `center`, `centerVertical`\n\u003c/details\u003e\n\u003cdetails\u003e\n\u003csummary\u003e\n  \u003ccode\u003espacing?: string\u003c/code\u003e\n\u003c/summary\u003e\n\n  - align child Sections to the right\n  - combine with `top`, `bottom`, `center`, `centerVertical`\n\u003c/details\u003e\n\u003cdetails\u003e\n\u003csummary\u003e\n  \u003ccode\u003etop?: boolean\u003c/code\u003e\n\u003c/summary\u003e\n\n  - align child Sections to the top\n  - combine with `left`, `right`, `center`, `centerHorizontal`\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\n  \u003ccode\u003ewrapEven?: boolean\u003c/code\u003e\n\u003c/summary\u003e\n\n  - `horizontal` Layout's wrapped orphan Sections maintain their basis-defined widths and remain aligned with preceding row columns\n  - useful for \"card\" layouts. \n\u003c/details\u003e\n\n### `\u003cSection /\u003e`\n\nThe `Section` component subdivides a `Layout` and contains other components or another `Layout`. The `grow` prop is used to define how a Section fills available space inside a `Layout`. Alignment props (e.g. `top`, `right`, etc.) may be combined to position content.\n\n#### Props\n\n\u003cdetails\u003e\n\u003csummary\u003e\n  \u003ccode\u003ebasis?: string | number\u003c/code\u003e\n\u003c/summary\u003e\n\n  ideal width (flex-basis)\n\u003c/details\u003e\n\u003cdetails\u003e\n\u003csummary\u003e\n  \u003ccode\u003ebottom?: boolean\u003c/code\u003e\n\u003c/summary\u003e\n\n  - align content to bottom of available Section area \n  - combine with `center`, `centerHorizontal`, `left`, `right`\n\u003c/details\u003e\n\u003cdetails\u003e\n\u003csummary\u003e\n  \u003ccode\u003ecenter?: boolean\u003c/code\u003e\n\u003c/summary\u003e\n\n  - align content to center X and Y axis of available Section area\n  - combine with `top`, `right`, `bottom`, `left`\n\u003c/details\u003e\n\u003cdetails\u003e\n\u003csummary\u003e\n  \u003ccode\u003ecenterHorizontal?: boolean\u003c/code\u003e\n\u003c/summary\u003e\n\n  - align content on the X axis of available Section area\n  - combine with `top`, `bottom`\n\u003c/details\u003e\n\u003cdetails\u003e\n\u003csummary\u003e\n  \u003ccode\u003ecenterVertical?: boolean\u003c/code\u003e\n\u003c/summary\u003e\n\n  - align content on the Y axis of available Section area\n  - combine with `left`, `right`\n\u003c/details\u003e\n\u003cdetails\u003e\n\u003csummary\u003e\n  \u003ccode\u003egrow?: boolean | number\u003c/code\u003e\n\u003c/summary\u003e\n\n  - fill available space in parent Layout\n  - boolean sets value to 1\n  - may be specified as a number (e.g. 0.5, 2, 50)\n\u003c/details\u003e\n\u003cdetails\u003e\n\u003csummary\u003e\n  \u003ccode\u003eleft?: boolean\u003c/code\u003e\n\u003c/summary\u003e\n\n  - align content to the left of available Section area\n  - combine with `top`, `bottom`, `center`, `centerVertical`\n\u003c/details\u003e\n\u003cdetails\u003e\n\u003csummary\u003e\n  \u003ccode\u003eright?: boolean\u003c/code\u003e\n\u003c/summary\u003e\n\n  - align content to the right of available Section area\n  - combine with `top`, `bottom`, `center`, `centerVertical`\n\u003c/details\u003e\n\u003cdetails\u003e\n\u003csummary\u003e\n  \u003ccode\u003etop?: boolean\u003c/code\u003e\n\u003c/summary\u003e\n\n  - align content to the top of available Section area\n  - combine with `left`, `right`, `center`, `centerHorizontal`\n\u003c/details\u003e\n\n## Develop\n\n- `npm run setup` install project and test app deps\n- `npm run dist` or `npm run dist:watch` - build\n- `npm run apps:run` - start storybook for web and native\n- `npm run apps:test` - run visual regression tests with [loki](https://github.com/oblador/loki)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcremalab%2Freact-layout-views","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcremalab%2Freact-layout-views","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcremalab%2Freact-layout-views/lists"}