{"id":15687091,"url":"https://github.com/linusu/react-stacked","last_synced_at":"2025-08-04T12:06:35.733Z","repository":{"id":46266492,"uuid":"281918291","full_name":"LinusU/react-stacked","owner":"LinusU","description":"Building blocks for robust cross-platform layouts","archived":false,"fork":false,"pushed_at":"2025-05-29T18:36:48.000Z","size":70,"stargazers_count":9,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-07-03T22:05:59.665Z","etag":null,"topics":["hacktoberfest","react","react-native"],"latest_commit_sha":null,"homepage":"","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/LinusU.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-07-23T10:13:24.000Z","updated_at":"2025-05-29T18:36:52.000Z","dependencies_parsed_at":"2025-05-11T18:45:34.050Z","dependency_job_id":"2004c5c3-7b07-4ccd-bbf2-def5e2e99d40","html_url":"https://github.com/LinusU/react-stacked","commit_stats":{"total_commits":32,"total_committers":1,"mean_commits":32.0,"dds":0.0,"last_synced_commit":"defe33975f7dff9860a141da59078b25db469284"},"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"purl":"pkg:github/LinusU/react-stacked","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LinusU%2Freact-stacked","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LinusU%2Freact-stacked/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LinusU%2Freact-stacked/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LinusU%2Freact-stacked/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LinusU","download_url":"https://codeload.github.com/LinusU/react-stacked/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LinusU%2Freact-stacked/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263410762,"owners_count":23462297,"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":["hacktoberfest","react","react-native"],"created_at":"2024-10-03T17:43:16.823Z","updated_at":"2025-07-03T22:06:00.841Z","avatar_url":"https://github.com/LinusU.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Stacked\n\nBuilding blocks for robust cross-platform layouts.\n\nThe vision of React Stacked is not to provide any styling or be a full-featured UI library, instead it aims to provide low lever primitives that works the same on different platforms.\n\nCurrently supported platforms:\n\n- React (`react-dom`)\n- React Native (`react-native` or `expo`)\n\n## Installation\n\n```sh\nnpm install --save react-stacked\n```\n\n## Usage\n\n```js\nconst { HStack, Text, VStack } = require('react-stacked')\n\nconst React = require('react')\nconst { render } = require('react-dom')\n\nconst Example = () =\u003e (\n  \u003cVStack height='150px'\u003e\n    \u003cHStack justifyContent='space-between'\u003e\n      \u003cText\u003eLeft\u003c/Text\u003e\n      \u003cText\u003eRight\u003c/Text\u003e\n    \u003c/HStack\u003e\n\n    \u003cHStack alignItems='center' justifyContent='center' grow='1'\u003e\n      \u003cText\u003eCenter\u003c/Text\u003e\n    \u003c/HStack\u003e\n  \u003c/VStack\u003e\n)\n\nrender(\u003cExample /\u003e)\n```\n\n```text\nLeft                             Right\n\n\n\n                Center\n\n\n\n```\n\n## Components\n\n### `\u003cTextStyle\u003e`\n\nAn inline text span\n\nProperty | Required | Type\n-------- | -------- | ----\ncolor | optional | `string`\ndecorationLine | optional | `'none' \\| 'underline' \\| 'line-through' \\| 'underline line-through'`\nfamily | optional | `string`\nitalic | optional | `boolean`\nsize | optional | `string \\| number`\ntransform | optional | `'none' \\| 'capitalize' \\| 'uppercase' \\| 'lowercase'`\nvariant | optional | `Array \\| 'small-caps' \\| 'oldstyle-nums' \\| 'lining-nums' \\| 'tabular-nums' \\| 'proportional-nums' \\| string`\nweight | optional | `'normal' \\| 'bold' \\| '100' \\| '200' \\| '300' \\| '400' \\| '500' \\| '600' \\| '700' \\| '800' \\| '900'`\n\n### `\u003cText\u003e`\n\nA block of text\n\nProperty | Required | Type | Comment\n-------- | -------- | ---- | -------\nalign | optional | `'left' \\| 'right' \\| 'center' \\| 'justify' \\| null`\nallowFontScaling | optional | `boolean` | Specifies whether fonts should scale to respect Text Size accessibility settings on supported platforms.\ncolor | optional | `string`\ndecorationLine | optional | `'none' \\| 'underline' \\| 'line-through' \\| 'underline line-through'`\nfamily | optional | `string`\nitalic | optional | `boolean`\nnumberOfLines | optional | `number \\| null` | Limit the text to the specified number of lines.\nrotate | optional | `number` | Rotate the text by the specified degrees. The origin of the transformation follows the text alignment.\nsize | optional | `string \\| number`\ntransform | optional | `'none' \\| 'capitalize' \\| 'uppercase' \\| 'lowercase'`\nvariant | optional | `Array \\| 'small-caps' \\| 'oldstyle-nums' \\| 'lining-nums' \\| 'tabular-nums' \\| 'proportional-nums' \\| string`\nweight | optional | `'normal' \\| 'bold' \\| '100' \\| '200' \\| '300' \\| '400' \\| '500' \\| '600' \\| '700' \\| '800' \\| '900'`\nalignSelf | optional | `'baseline' \\| 'center' \\| 'end' \\| 'start' \\| 'stretch'` | Override alignment along the cross axis for this item.\nwidth | optional | `string \\| number` | The width of the container.\nminWidth | optional | `string \\| number` | The minimum width of the container.\nmaxWidth | optional | `string \\| number` | The maximum width of the container.\nheight | optional | `string \\| number` | The height of the container.\nminHeight | optional | `string \\| number` | The minimum height of the container.\nmaxHeight | optional | `string \\| number` | The maximum height of the container.\nbasis | optional | `string \\| number` | The flex basis of the container.\ngrow | optional | `string \\| number` | The flex grow factor of the container.\nshrink | optional | `string \\| number` | The flex shrink factor of the container.\npadding | optional | `string \\| number`\npaddingBottom | optional | `string \\| number`\npaddingHorizontal | optional | `string \\| number`\npaddingLeft | optional | `string \\| number`\npaddingRight | optional | `string \\| number`\npaddingTop | optional | `string \\| number`\npaddingVertical | optional | `string \\| number`\nborderRadius | optional | `number`\nborderBottomLeftRadius | optional | `number`\nborderBottomRightRadius | optional | `number`\nborderTopLeftRadius | optional | `number`\nborderTopRightRadius | optional | `number`\nborderColor | optional | `string`\nborderBottomColor | optional | `string`\nborderLeftColor | optional | `string`\nborderRightColor | optional | `string`\nborderTopColor | optional | `string`\nborderStyle | optional | `'solid' \\| 'dotted' \\| 'dashed'`\nborderWidth | optional | `string \\| number`\nborderBottomWidth | optional | `string \\| number`\nborderLeftWidth | optional | `string \\| number`\nborderRightWidth | optional | `string \\| number`\nborderTopWidth | optional | `string \\| number`\nbackgroundColor | optional | `string`\n\n### `\u003cHStack\u003e`\n\nA horizontal stack\n\nProperty | Required | Type | Comment\n-------- | -------- | ---- | -------\nalignItems | optional | `'baseline' \\| 'center' \\| 'end' \\| 'start' \\| 'stretch'` | How to align children along the cross axis.\njustifyContent | optional | `'center' \\| 'end' \\| 'start' \\| 'stretch' \\| 'space-around' \\| 'space-between' \\| 'space-evenly'` | How to align children within the main axis.\nwrap | optional | `boolean` | What happens when children overflow along the main axis.\ngap | optional | `number` | The size of the gaps (gutters) between rows and columns.\nrowGap | optional | `number` | The size of the gap (gutter) between an element's rows.\ncolumnGap | optional | `number` | The size of the gap (gutter) between an element's columns.\noverflow | optional | `'hidden' \\| 'visible'` | Set the desired behavior when content does not fit in the element's padding box (overflows) in the horizontal and/or vertical direction\nalignSelf | optional | `'baseline' \\| 'center' \\| 'end' \\| 'start' \\| 'stretch'` | Override alignment along the cross axis for this item.\nwidth | optional | `string \\| number` | The width of the container.\nminWidth | optional | `string \\| number` | The minimum width of the container.\nmaxWidth | optional | `string \\| number` | The maximum width of the container.\nheight | optional | `string \\| number` | The height of the container.\nminHeight | optional | `string \\| number` | The minimum height of the container.\nmaxHeight | optional | `string \\| number` | The maximum height of the container.\nbasis | optional | `string \\| number` | The flex basis of the container.\ngrow | optional | `string \\| number` | The flex grow factor of the container.\nshrink | optional | `string \\| number` | The flex shrink factor of the container.\npadding | optional | `string \\| number`\npaddingBottom | optional | `string \\| number`\npaddingHorizontal | optional | `string \\| number`\npaddingLeft | optional | `string \\| number`\npaddingRight | optional | `string \\| number`\npaddingTop | optional | `string \\| number`\npaddingVertical | optional | `string \\| number`\nborderRadius | optional | `number`\nborderBottomLeftRadius | optional | `number`\nborderBottomRightRadius | optional | `number`\nborderTopLeftRadius | optional | `number`\nborderTopRightRadius | optional | `number`\nborderColor | optional | `string`\nborderBottomColor | optional | `string`\nborderLeftColor | optional | `string`\nborderRightColor | optional | `string`\nborderTopColor | optional | `string`\nborderStyle | optional | `'solid' \\| 'dotted' \\| 'dashed'`\nborderWidth | optional | `string \\| number`\nborderBottomWidth | optional | `string \\| number`\nborderLeftWidth | optional | `string \\| number`\nborderRightWidth | optional | `string \\| number`\nborderTopWidth | optional | `string \\| number`\nbackgroundColor | optional | `string`\n\n### `\u003cVStack\u003e`\n\nA vertical stack\n\nProperty | Required | Type | Comment\n-------- | -------- | ---- | -------\nalignItems | optional | `'baseline' \\| 'center' \\| 'end' \\| 'start' \\| 'stretch'` | How to align children along the cross axis.\njustifyContent | optional | `'center' \\| 'end' \\| 'start' \\| 'stretch' \\| 'space-around' \\| 'space-between' \\| 'space-evenly'` | How to align children within the main axis.\nwrap | optional | `boolean` | What happens when children overflow along the main axis.\ngap | optional | `number` | The size of the gaps (gutters) between rows and columns.\nrowGap | optional | `number` | The size of the gap (gutter) between an element's rows.\ncolumnGap | optional | `number` | The size of the gap (gutter) between an element's columns.\noverflow | optional | `'hidden' \\| 'visible'` | Set the desired behavior when content does not fit in the element's padding box (overflows) in the horizontal and/or vertical direction\nalignSelf | optional | `'baseline' \\| 'center' \\| 'end' \\| 'start' \\| 'stretch'` | Override alignment along the cross axis for this item.\nwidth | optional | `string \\| number` | The width of the container.\nminWidth | optional | `string \\| number` | The minimum width of the container.\nmaxWidth | optional | `string \\| number` | The maximum width of the container.\nheight | optional | `string \\| number` | The height of the container.\nminHeight | optional | `string \\| number` | The minimum height of the container.\nmaxHeight | optional | `string \\| number` | The maximum height of the container.\nbasis | optional | `string \\| number` | The flex basis of the container.\ngrow | optional | `string \\| number` | The flex grow factor of the container.\nshrink | optional | `string \\| number` | The flex shrink factor of the container.\npadding | optional | `string \\| number`\npaddingBottom | optional | `string \\| number`\npaddingHorizontal | optional | `string \\| number`\npaddingLeft | optional | `string \\| number`\npaddingRight | optional | `string \\| number`\npaddingTop | optional | `string \\| number`\npaddingVertical | optional | `string \\| number`\nborderRadius | optional | `number`\nborderBottomLeftRadius | optional | `number`\nborderBottomRightRadius | optional | `number`\nborderTopLeftRadius | optional | `number`\nborderTopRightRadius | optional | `number`\nborderColor | optional | `string`\nborderBottomColor | optional | `string`\nborderLeftColor | optional | `string`\nborderRightColor | optional | `string`\nborderTopColor | optional | `string`\nborderStyle | optional | `'solid' \\| 'dotted' \\| 'dashed'`\nborderWidth | optional | `string \\| number`\nborderBottomWidth | optional | `string \\| number`\nborderLeftWidth | optional | `string \\| number`\nborderRightWidth | optional | `string \\| number`\nborderTopWidth | optional | `string \\| number`\nbackgroundColor | optional | `string`\n\n### `\u003cZStack\u003e`\n\nA stack with depth\n\nProperty | Required | Type | Comment\n-------- | -------- | ---- | -------\nalign | optional | `'center' \\| 'end' \\| 'start'` | How to align children along both axis.\nalignHorizontal | optional | `'center' \\| 'end' \\| 'start'` | How to align children horizontally.\nalignVertical | optional | `'center' \\| 'end' \\| 'start'` | How to align children vertically.\noverflow | optional | `'hidden' \\| 'visible'` | Set the desired behavior when content does not fit in the element's padding box (overflows) in the horizontal and/or vertical direction\nalignSelf | optional | `'baseline' \\| 'center' \\| 'end' \\| 'start' \\| 'stretch'` | Override alignment along the cross axis for this item.\nwidth | optional | `string \\| number` | The width of the container.\nminWidth | optional | `string \\| number` | The minimum width of the container.\nmaxWidth | optional | `string \\| number` | The maximum width of the container.\nheight | optional | `string \\| number` | The height of the container.\nminHeight | optional | `string \\| number` | The minimum height of the container.\nmaxHeight | optional | `string \\| number` | The maximum height of the container.\nbasis | optional | `string \\| number` | The flex basis of the container.\ngrow | optional | `string \\| number` | The flex grow factor of the container.\nshrink | optional | `string \\| number` | The flex shrink factor of the container.\npadding | optional | `string \\| number`\npaddingBottom | optional | `string \\| number`\npaddingHorizontal | optional | `string \\| number`\npaddingLeft | optional | `string \\| number`\npaddingRight | optional | `string \\| number`\npaddingTop | optional | `string \\| number`\npaddingVertical | optional | `string \\| number`\nborderRadius | optional | `number`\nborderBottomLeftRadius | optional | `number`\nborderBottomRightRadius | optional | `number`\nborderTopLeftRadius | optional | `number`\nborderTopRightRadius | optional | `number`\nborderColor | optional | `string`\nborderBottomColor | optional | `string`\nborderLeftColor | optional | `string`\nborderRightColor | optional | `string`\nborderTopColor | optional | `string`\nborderStyle | optional | `'solid' \\| 'dotted' \\| 'dashed'`\nborderWidth | optional | `string \\| number`\nborderBottomWidth | optional | `string \\| number`\nborderLeftWidth | optional | `string \\| number`\nborderRightWidth | optional | `string \\| number`\nborderTopWidth | optional | `string \\| number`\nbackgroundColor | optional | `string`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flinusu%2Freact-stacked","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flinusu%2Freact-stacked","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flinusu%2Freact-stacked/lists"}