1.2.0 • Published 4 years ago

layout-blocks v1.2.0

Weekly downloads
1
License
MIT
Repository
github
Last release
4 years ago

Layout Blocks

Reusable layout components for your React project

npm i layout-blocks

Components

All layout components support an as prop to define the html element you want the block to render as (defaults to div).

VStack

Renders children in a vertical stack with a prop to control horizontal alignment.

import { VStack } from 'layout-blocks'
propvaluesdescriptiondefault
alignmentleading center trailing stretchControls the horizontal alignment of childrenstretch

Screen

A special opinionated version of a vertical stack that assumes height and width of the viewport and also centers content both horizontally and vertically.

import { Screen } from 'layout-blocks'

HStack

Renders children in a horizontal stack with a prop to control vertical alignment.

import { HStack } from 'layout-blocks'
propvaluesdescriptiondefault
alignmenttop center bottom stretchControls the vertical alignment of childrenstretch

Flex

Useful for controlling how much space an item takes up within a HStack, VStack, or Screen. Think of this as an abstraction over flex properties. Use it to control growing, shrinking, and initial size.

import { Flex } from 'layout-blocks'
propvaluedescriptiondefault
growstringSpecifies the flex-grow property1
shrinkstringSpecifies the flex-shrink property1
basisstringSpecifies the flex-basis property0%

Spacer

Shorthand for <Flex /> with no props. Useful to insert space within stacks to push surrounding content away.

import { Spacer } from 'layout-blocks'

Breakout

Useful when you have a restricting container (maybe in width) and you need an element to stretch to the width of the viewport without flowing the element outside of the container (like a callout section).

import { Breakout } from 'layout-blocks'

Tiles

Renders children in a grid with a prop to control the minimum width before rendering each child in a row of it's own.

import { Tiles } from 'layout-blocks'
propvaluedescriptiondefault
minstringMinimum width of child before collapsing to one item per row250px
1.2.0

4 years ago

1.1.1

4 years ago

1.1.0

4 years ago

1.0.0

5 years ago

0.3.0

5 years ago

0.2.0

5 years ago

0.1.5

5 years ago

0.1.4

5 years ago

0.1.3

5 years ago

0.1.2

5 years ago

0.1.1

5 years ago

0.1.0

5 years ago