Package Exports

@gdo-bzh/stack

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@gdo-bzh/stack) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

version

stack

Stack a group of elements together on a single row or column

Install

yarn add @gdo-bzh/stack @gdo-bzh/theme @xstyled/styled-components react reakit styled-components
# or
npm i @gdo-bzh/stack @gdo-bzh/theme @xstyled/styled-components react reakit styled-components -S

Usage

import React from 'react'

const Example = () => {
  const items = ['one', 'two', 'three']
  return (
    <Stack spacing="sm">
      {items.map(label => (
        <Box
          display="flex"
          alignItems="center"
          justifyContent="center"
          backgroundColor="tomato"
          color="white"
          p={5}
          width={50}
        >
          {label}
        </Box>
      ))}
    </Stack>
  )
}

Types

import { Group } from 'reakit/Group'
import { StyledComponentProps, DefaultTheme } from '@xstyled/styled-components'

type Props = StyledComponentProps<typeof Group, DefaultTheme, any, never> & {
  /**
   * sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed)
   */
  direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse'
  /**
   * spacing between each element
   */
  spacing?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl'
  /**
   * controls alignment of all items on the cross axis
   */
  align?: 'center' | 'flex-start' | 'flex-end' | 'stretch' | 'baseline' | 'initial' | 'inherit'
  /**
   * controls alignment of all items on the main axis
   */
  justify?:
    | 'center'
    | 'flex-start'
    | 'flex-end'
    | 'space-between'
    | 'space-around'
    | 'initial'
    | 'inherit'
}

@gdo-bzh/stack