Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

layout-blocks

Package Overview
Dependencies
Maintainers
1
Versions
12
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

layout-blocks

Reusable layout components for your React project

  • 1.1.1
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
3
decreased by-50%
Maintainers
1
Weekly downloads
 
Created
Source

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

Keywords

FAQs

Package last updated on 15 Dec 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc