{"id":13437303,"url":"https://github.com/robinweser/react-layout-components","last_synced_at":"2025-04-06T04:14:35.945Z","repository":{"id":33164250,"uuid":"36805176","full_name":"robinweser/react-layout-components","owner":"robinweser","description":"Layout Components for React based on Flexbox","archived":false,"fork":false,"pushed_at":"2022-12-06T19:47:00.000Z","size":467,"stargazers_count":337,"open_issues_count":17,"forks_count":43,"subscribers_count":15,"default_branch":"develop","last_synced_at":"2025-04-02T18:08:44.648Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/robinweser.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}},"created_at":"2015-06-03T13:24:36.000Z","updated_at":"2024-10-10T11:10:24.000Z","dependencies_parsed_at":"2023-01-14T23:44:50.525Z","dependency_job_id":null,"html_url":"https://github.com/robinweser/react-layout-components","commit_stats":null,"previous_names":["rofrischmann/react-layout-components"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robinweser%2Freact-layout-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robinweser%2Freact-layout-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robinweser%2Freact-layout-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robinweser%2Freact-layout-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/robinweser","download_url":"https://codeload.github.com/robinweser/react-layout-components/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247430963,"owners_count":20937875,"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":[],"created_at":"2024-07-31T03:00:55.828Z","updated_at":"2025-04-06T04:14:35.914Z","avatar_url":"https://github.com/robinweser.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized","📦 Legacy \u0026 Inactive Projects"],"sub_categories":["Uncategorized"],"readme":"\u003e **Not actively maintained!** This project is not actively maintained anymore. If you'd like to take ownership - feel free to contact me!\n\n# React Layout Components\n```sh\nnpm install react-layout-components\n```\nUseful, Modern and universal layout Components for [React.js](https://facebook.github.io/react/) based on flexbox.\u003cbr\u003e\n\nThe basis `\u003cBox\u003e` Component is highly inspired by [React Native](https://facebook.github.io/react-native/)'s [Flexbox](https://facebook.github.io/react-native/docs/flexbox.html#content) implementation and though accepts almost the same props.\nIt supports all flexbox specifications and automatically adds alternative values and prefixes thanks to [inline-style-prefix-all](https://github.com/rofrischmann/inline-style-prefix-all) if needed.\n\n[![npm downloads](https://img.shields.io/npm/dm/react-layout-components.svg)](https://img.shields.io/npm/dm/react-layout-components.svg)\n\n\u003e **Note**: If you're not familiar with Flexbox at all, I recommend [css-tricks 'Complete Guide to Flexbox'](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) which is an awesome source for beginners as well as a nice refreshment for experts.\n\n# Components\nTo be able to use any of those Components below, make sure you have added the following CSS class somewhere. Personally I just inline it inside the `\u003chead\u003e` of the `index.html`.\n```CSS\n.react-layout-components--box {\n  display: -webkit-box;\n  display: -moz-box;\n  display: -ms-flexbox;\n  display: -webkit-flex;\n  display: flex;\n}\n```\n\u003e **Note**: This is a temporary fix and will hopefully be removed if React merges  https://github.com/facebook/react/pull/6701.\n\n* [Box](#box)\n* [Container](#container)\n* [Page](#page)\n* [ScrollView](#scrollview)\n\n##### Shortcuts\n\n* [VBox](#hbox)\n* [Flex](#flex)\n* [Center](#center)\n\n## Box\nBox is an universal container component based on flexbox.\u003cbr\u003e\nYou can most likely use this Component for **everything** as is helps recreating almost any possible layout.\n\n```javascript\nimport React from 'react'\nimport Box from 'react-layout-components'\n\nconst Example = () =\u003e (\n  // This acts as some kind of container\n  \u003cBox width={300} height={500}\u003e\n      //This acts as an actual flexbox container\n      \u003cBox justifyContent=\"center\" alignItems=\"flex-start\"\u003e\n        \u003cBox flex={3}\u003eFlex 3\u003c/Box\u003e\n        \u003cBox flex=\"1 0 auto\" alignSelf=\"baseline\"\u003eFlex 1\u003c/Box\u003e\n    \u003c/Box\u003e\n  \u003c/Box\u003e\n)\n```\n\n### Props\n| Property       | Description              | Options                                                             |\n| -------------- | ------------------------ | ------------------------------------------------------------------- |\n| flex           |                          | `flex-grow flex-shrink flex-basis`                                  |\n| flexGrow       |                          | positive integer \u003e= 0                                               |\n| flexShrink     |                          | positive integer \u003e= 0                                               |\n| flexBasis      | base size                | size value, `auto`                                                  |\n| order          | item order               |                                                                     |\n| inline         | `display: inline-flex`   | shortcut                                                            |\n| column         | `flex-direction: column` | shortcut                                                            |\n| reverse        | reverse `flex-direction` | shortcut                                                            |\n| wrap           | `flex-wrap: wrap`        | shortcut, `wrap-reverse`                                            |\n| flow           | `row nowrap`             | `flex-direction flex-wrap`                                          |\n| alignContent   | line-content align       | `center`, `flex-start`, `flex-end`, `space-around`, `space-between` |\n| justifyContent | main-axis align          | `center`, `flex-start`, `flex-end`, `space-around`, `space-between` |\n| alignItems     | cross-axis align         | `center`, `flex-start`, `flex-end`, `baseline`, `stretch`           |\n| alignSelf      | item self align          | `center`, `flex-start`, `flex-end`, `baseline`, `stretch`           |\n\n##### Shortcuts\n\n| Property     | Description                                      |\n| ------------ | ------------------------------------------------ |\n| fit          | `width: 100%; height: 100%`                      |\n| center       | `justify-content: center; align-items: center`   |\n\n##### Size\nBox lets you also define size properties which are `width`, `height`, `minWidth`, `maxWidth`, `minHeight` and `maxHeight`.\n\n##### Defaults\nBrowser default values don't need to be set explicit and are defined as\n```CSS\n{\n  display: flex;\n  flex: 0 1 auto;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: stretch;\n  align-content: stretch;\n  flex-wrap: nowrap;\n}\n```\n\n## Container\nContainer is a Component to style [box-model](https://css-tricks.com/the-css-box-model/)\n properties.\n\n### Props\n\n* **Padding**: `padding`, `paddingLeft`, `paddingTop`, `paddingRight`, `paddingBottom`\n* **Margin**: `margin`, `marginLeft`, `marginTop`, `marginRight`, `marginBottom`\n* **Border**: `border`, `borderColor`, `borderWidth`, `borderStyle`, `borderTop`, `borderLeft`, `borderBottom`, `borderRight`\n* **Size**: `width`, `height`, `minWidth`, `maxWidth`, `minHeight`, `maxHeight`\n* **Position**: `top`, `left`, `bottom`, `right`\n* **Flow**: `overflow`, `overflowX`, `overflowY`, `textOverflow`, `whiteSpace`\n\nYou may also set `boxSizing` which defines how the size of a box is calculated. You may use `border-box`, `content-box` or `padding-box`.\n\n\n##### Shortcuts\nThere are some shortcut properties. They do not accept a value. e.g.\n`\u003cContainer fixed\u003e\u003c/Container\u003e`.\n\n| Property     | Description                                    |\n| ------------ | ---------------------------------------------- |\n| fixed        | `position:fixed`                               |\n| absolute     | `position:absolute`                            |\n| borderTop    | Adds a border at the top with `borderWidth`    |\n| borderLeft   | Adds a border to the left with `borderWidth`   |\n| borderRight  | Adds a border to the right with `borderWidth`  |\n| borderBottom | Adds a border at the bottom with `borderWidth` |\n\n## Page\nPage is just a shortcut for a page-filling Component. It also is fixed to the edges of your WebView.\n\n## ScrollView\nScrollView is a scrollable container. It is build on the `\u003cBox\u003e`-Component, which let's you either use default box-model sizing or flexbox sizing.\n### Props\n\n| Property         | Description                             | Options\n| ---------------- | --------------------------------------- | -------------------- |\n| height           | container height                        |\n| width            | container width                         |\n| horizontal       | enables horizontal scrollable container | `boolean`\n| initialScrollPos | scroll position                         | `number`\n| onScroll         | gets fired on scrolling                 | `function`\n\n### Methods\n* `getScrollPosition()`\u003cbr\u003e\nReturns the actual scroll position.\n\n* `scrollTo(scrollPosition)`\u003cbr\u003e\nScrolls to the `scrollPosition`.\n\n* `scrollToStart()`\u003cbr\u003e\nScrolls to the container start.\n\n* `scrollToEnd()`\u003cbr\u003e\nScrolls to the container end.\n\n## Shortcuts\n### VBox\n`Box` with `flex-direction: column`. (vertical flow)\n\n### Flex\n`Box` with `flex: 1 0 auto`.\n\n### Center\n`Box` centerering its children with `justify-content: center; align-items: center`.\n\n# Demo\nTo run the included demo, run the following command: `$ npm run build:demo \u0026\u0026 open demo/index.html`\n\n# License\nreact-layout-components is licensed under the [MIT License](http://opensource.org/licenses/MIT).\nCreated with \u0026hearts; by [@rofrischmann](http://rofrischmann.de).\n\n\n# Contributing\nI would love to see people getting involved.\u003cbr\u003e\nIf you have a feature request please create an issue. Also if you're even improving one of the Components by any kind please don't be shy and send a pull request to let everyone benefit.\n\n### Issues\nIf you're having any issue please let me know as fast as possible to find a solution a hopefully fix the issue. Try to add as much information as possible such as your environment, exact case, the line of actions to reproduce the issue.\n\n### Pull Requests\nIf you are creating a pull request, try to use commit messages that are self-explanatory.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobinweser%2Freact-layout-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frobinweser%2Freact-layout-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobinweser%2Freact-layout-components/lists"}