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'
}

License

MIT © gdo-bzh