npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-stacked

v0.3.10

Published

Building blocks for robust cross-platform layouts.

Downloads

192

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

npm install --save react-stacked

Usage

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

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

const Example = () => (
  <VStack height='150px'>
    <HStack justifyContent='space-between'>
      <Text>Left</Text>
      <Text>Right</Text>
    </HStack>

    <HStack alignItems='center' justifyContent='center' grow='1'>
      <Text>Center</Text>
    </HStack>
  </VStack>
)

render(<Example />)
Left                             Right



                Center


Components

<TextStyle>

An inline text span

Property | Required | Type -------- | -------- | ---- color | optional | string decorationLine | optional | 'none' \| 'underline' \| 'line-through' \| 'underline line-through' family | optional | string 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'

<Text>

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' family | optional | string 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

<HStack>

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

<VStack>

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

<ZStack>

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