Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/linusu/react-stacked

Building blocks for robust cross-platform layouts
https://github.com/linusu/react-stacked
hacktoberfest react react-native
Last synced: 11 days ago
JSON representation
Building blocks for robust cross-platform layouts
Host: GitHub
URL: https://github.com/linusu/react-stacked
Owner: LinusU
Created: 2020-07-23T10:13:24.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2024-10-03T16:25:35.000Z (about 1 month ago)
Last Synced: 2024-10-23T21:54:48.341Z (20 days ago)
Topics: hacktoberfest, react, react-native
Language: JavaScript
Homepage:
Size: 109 KB
Stars: 9
Watchers: 4
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project

README

        # React Stacked

Building blocks for robust cross-platform layouts.

The 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.

Currently supported platforms:

- React (`react-dom`)

- React Native (`react-native` or `expo`)

## Installation

```sh

npm install --save react-stacked

```

## Usage

```js

const { HStack, Text, VStack } = require('react-stacked')

const React = require('react')

const { render } = require('react-dom')

const Example = () => (

  

    

      Left

      Right

    

    

      Center

    

  

)

render()

```

```text

Left                             Right

                Center

```

## Components

### ``

An inline text span

Property | Required | Type

-------- | -------- | ----

color | optional | `string`

decorationLine | optional | `'none' \| 'underline' \| 'line-through' \| 'underline line-through'`

size | optional | `string \| number`

transform | optional | `'none' \| 'capitalize' \| 'uppercase' \| 'lowercase'`

variant | optional | `Array \| 'small-caps' \| 'oldstyle-nums' \| 'lining-nums' \| 'tabular-nums' \| 'proportional-nums' \| string`

weight | optional | `'normal' \| 'bold' \| '100' \| '200' \| '300' \| '400' \| '500' \| '600' \| '700' \| '800' \| '900'`

### ``

A block of text

Property | Required | Type | Comment

-------- | -------- | ---- | -------

align | optional | `'left' \| 'right' \| 'center' \| 'justify' \| null`

allowFontScaling | optional | `boolean` | Specifies whether fonts should scale to respect Text Size accessibility settings on supported platforms.

color | optional | `string`

decorationLine | optional | `'none' \| 'underline' \| 'line-through' \| 'underline line-through'`

numberOfLines | optional | `number \| null` | Limit the text to the specified number of lines.

rotate | optional | `number` | Rotate the text by the specified degrees. The origin of the transformation follows the text alignment.

size | optional | `string \| number`

transform | optional | `'none' \| 'capitalize' \| 'uppercase' \| 'lowercase'`

variant | optional | `Array \| 'small-caps' \| 'oldstyle-nums' \| 'lining-nums' \| 'tabular-nums' \| 'proportional-nums' \| string`

weight | optional | `'normal' \| 'bold' \| '100' \| '200' \| '300' \| '400' \| '500' \| '600' \| '700' \| '800' \| '900'`

alignSelf | optional | `'baseline' \| 'center' \| 'end' \| 'start' \| 'stretch'` | Override alignment along the cross axis for this item.

width | optional | `string \| number` | The width of the container.

minWidth | optional | `string \| number` | The minimum width of the container.

maxWidth | optional | `string \| number` | The maximum width of the container.

height | optional | `string \| number` | The height of the container.

minHeight | optional | `string \| number` | The minimum height of the container.

maxHeight | optional | `string \| number` | The maximum height of the container.

basis | optional | `string \| number` | The flex basis of the container.

grow | optional | `string \| number` | The flex grow factor of the container.

shrink | optional | `string \| number` | The flex shrink factor of the container.

padding | optional | `string \| number`

paddingBottom | optional | `string \| number`

paddingHorizontal | optional | `string \| number`

paddingLeft | optional | `string \| number`

paddingRight | optional | `string \| number`

paddingTop | optional | `string \| number`

paddingVertical | optional | `string \| number`

borderRadius | optional | `number`

borderBottomLeftRadius | optional | `number`

borderBottomRightRadius | optional | `number`

borderTopLeftRadius | optional | `number`

borderTopRightRadius | optional | `number`

borderColor | optional | `string`

borderBottomColor | optional | `string`

borderLeftColor | optional | `string`

borderRightColor | optional | `string`

borderTopColor | optional | `string`

borderStyle | optional | `'solid' \| 'dotted' \| 'dashed'`

borderWidth | optional | `string \| number`

borderBottomWidth | optional | `string \| number`

borderLeftWidth | optional | `string \| number`

borderRightWidth | optional | `string \| number`

borderTopWidth | optional | `string \| number`

backgroundColor | optional | `string`

### ``

A horizontal stack

Property | Required | Type | Comment

-------- | -------- | ---- | -------

alignItems | optional | `'baseline' \| 'center' \| 'end' \| 'start' \| 'stretch'` | How to align children along the cross axis.

justifyContent | optional | `'center' \| 'end' \| 'start' \| 'stretch' \| 'space-around' \| 'space-between' \| 'space-evenly'` | How to align children within the main axis.

wrap | optional | `boolean` | What happens when children overflow along the main axis.

gap | optional | `number` | The size of the gaps (gutters) between rows and columns.

rowGap | optional | `number` | The size of the gap (gutter) between an element's rows.

columnGap | optional | `number` | The size of the gap (gutter) between an element's columns.

overflow | 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

alignSelf | optional | `'baseline' \| 'center' \| 'end' \| 'start' \| 'stretch'` | Override alignment along the cross axis for this item.

width | optional | `string \| number` | The width of the container.

minWidth | optional | `string \| number` | The minimum width of the container.

maxWidth | optional | `string \| number` | The maximum width of the container.

height | optional | `string \| number` | The height of the container.

minHeight | optional | `string \| number` | The minimum height of the container.

maxHeight | optional | `string \| number` | The maximum height of the container.

basis | optional | `string \| number` | The flex basis of the container.

grow | optional | `string \| number` | The flex grow factor of the container.

shrink | optional | `string \| number` | The flex shrink factor of the container.

padding | optional | `string \| number`

paddingBottom | optional | `string \| number`

paddingHorizontal | optional | `string \| number`

paddingLeft | optional | `string \| number`

paddingRight | optional | `string \| number`

paddingTop | optional | `string \| number`

paddingVertical | optional | `string \| number`

borderRadius | optional | `number`

borderBottomLeftRadius | optional | `number`

borderBottomRightRadius | optional | `number`

borderTopLeftRadius | optional | `number`

borderTopRightRadius | optional | `number`

borderColor | optional | `string`

borderBottomColor | optional | `string`

borderLeftColor | optional | `string`

borderRightColor | optional | `string`

borderTopColor | optional | `string`

borderStyle | optional | `'solid' \| 'dotted' \| 'dashed'`

borderWidth | optional | `string \| number`

borderBottomWidth | optional | `string \| number`

borderLeftWidth | optional | `string \| number`

borderRightWidth | optional | `string \| number`

borderTopWidth | optional | `string \| number`

backgroundColor | optional | `string`

### ``

A vertical stack

Property | Required | Type | Comment

-------- | -------- | ---- | -------

alignItems | optional | `'baseline' \| 'center' \| 'end' \| 'start' \| 'stretch'` | How to align children along the cross axis.

justifyContent | optional | `'center' \| 'end' \| 'start' \| 'stretch' \| 'space-around' \| 'space-between' \| 'space-evenly'` | How to align children within the main axis.

wrap | optional | `boolean` | What happens when children overflow along the main axis.

gap | optional | `number` | The size of the gaps (gutters) between rows and columns.

rowGap | optional | `number` | The size of the gap (gutter) between an element's rows.

columnGap | optional | `number` | The size of the gap (gutter) between an element's columns.

overflow | 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

alignSelf | optional | `'baseline' \| 'center' \| 'end' \| 'start' \| 'stretch'` | Override alignment along the cross axis for this item.

width | optional | `string \| number` | The width of the container.

minWidth | optional | `string \| number` | The minimum width of the container.

maxWidth | optional | `string \| number` | The maximum width of the container.

height | optional | `string \| number` | The height of the container.

minHeight | optional | `string \| number` | The minimum height of the container.

maxHeight | optional | `string \| number` | The maximum height of the container.

basis | optional | `string \| number` | The flex basis of the container.

grow | optional | `string \| number` | The flex grow factor of the container.

shrink | optional | `string \| number` | The flex shrink factor of the container.

padding | optional | `string \| number`

paddingBottom | optional | `string \| number`

paddingHorizontal | optional | `string \| number`

paddingLeft | optional | `string \| number`

paddingRight | optional | `string \| number`

paddingTop | optional | `string \| number`

paddingVertical | optional | `string \| number`

borderRadius | optional | `number`

borderBottomLeftRadius | optional | `number`

borderBottomRightRadius | optional | `number`

borderTopLeftRadius | optional | `number`

borderTopRightRadius | optional | `number`

borderColor | optional | `string`

borderBottomColor | optional | `string`

borderLeftColor | optional | `string`

borderRightColor | optional | `string`

borderTopColor | optional | `string`

borderStyle | optional | `'solid' \| 'dotted' \| 'dashed'`

borderWidth | optional | `string \| number`

borderBottomWidth | optional | `string \| number`

borderLeftWidth | optional | `string \| number`

borderRightWidth | optional | `string \| number`

borderTopWidth | optional | `string \| number`

backgroundColor | optional | `string`

### ``

A stack with depth

Property | Required | Type | Comment

-------- | -------- | ---- | -------

align | optional | `'center' \| 'end' \| 'start'` | How to align children along both axis.

alignHorizontal | optional | `'center' \| 'end' \| 'start'` | How to align children horizontally.

alignVertical | optional | `'center' \| 'end' \| 'start'` | How to align children vertically.

overflow | 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

alignSelf | optional | `'baseline' \| 'center' \| 'end' \| 'start' \| 'stretch'` | Override alignment along the cross axis for this item.

width | optional | `string \| number` | The width of the container.

minWidth | optional | `string \| number` | The minimum width of the container.

maxWidth | optional | `string \| number` | The maximum width of the container.

height | optional | `string \| number` | The height of the container.

minHeight | optional | `string \| number` | The minimum height of the container.

maxHeight | optional | `string \| number` | The maximum height of the container.

basis | optional | `string \| number` | The flex basis of the container.

grow | optional | `string \| number` | The flex grow factor of the container.

shrink | optional | `string \| number` | The flex shrink factor of the container.

padding | optional | `string \| number`

paddingBottom | optional | `string \| number`

paddingHorizontal | optional | `string \| number`

paddingLeft | optional | `string \| number`

paddingRight | optional | `string \| number`

paddingTop | optional | `string \| number`

paddingVertical | optional | `string \| number`

borderRadius | optional | `number`

borderBottomLeftRadius | optional | `number`

borderBottomRightRadius | optional | `number`

borderTopLeftRadius | optional | `number`

borderTopRightRadius | optional | `number`

borderColor | optional | `string`

borderBottomColor | optional | `string`

borderLeftColor | optional | `string`

borderRightColor | optional | `string`

borderTopColor | optional | `string`

borderStyle | optional | `'solid' \| 'dotted' \| 'dashed'`

borderWidth | optional | `string \| number`

borderBottomWidth | optional | `string \| number`

borderLeftWidth | optional | `string \| number`

borderRightWidth | optional | `string \| number`

borderTopWidth | optional | `string \| number`

backgroundColor | optional | `string`