basic-comps v1.0.0

Installation

$ yarn add basic-comps
# or
$ npm install basic-comps

Features

• By default, all components are display:flex. Therefore, all components follow the flexbox layout.

• Size type props(such as width, height, marginTop, fontSize, etc...) accept a number type. If a value in px is inputted, it will be internally converted to rem values. For example, if the input is 20, it will be converted to 1.25rem. In the future, I plan to make it configurable both the input and output units.

• Spacing props(such as padding, margin) can accept several different types.
  • string: It is passed without any changes or modifications
  • Size: It applied to all sides (top, bottom, left, right)
  • [Size, Size]: top/bottom | left/right
  • [Size, Size, Size]: top | left/right | bottom
  • [Size, Size, Size, Size]: top | right | bottom | left

Components

Box

Box component is the most basic component. It can accept most CSS properties, excluding paragraph and grid-related ones, and can be used to create a "box" as the name suggests.

Default styles

display: flex;
flex-direction: column;
align-items: stretch;

Props

• relative: boolean type. If true, it has position: relative.
• center: boolean type. If true, both align-items and justify-content are center.

Example

<Box backgroundColor="gray" borderRadius={4} padding={[12, 16]}>
  hello world!
</Box>

Absolute, Fixed, Sticky

These are box components that have the position CSS property and related props(top, bottom, left, right, inset, zIndex, etc...).

Stacks

Both VStack and HStack are layout components used to arrange elements.

Default styles

• VStack

flex-direction: column;
align-items: stretch;

• HStack

flex-direction: row;
align-items: center;

Props

• spacing: Size type. It sets the spacing of items aligned on main axis.
• crossSpacing: Size type. It sets the spacing of items aligned on cross axis. It only works when the flexWrap(#) prop is set.
  • reference: The two axes of flexbox
• reversed: boolean type. It specifies the stack direction is reversed.

Dividers

VDivider and HDivider are components that used to visually separate elements. It is the only component that does not inherit from the Box component.

Grid, GridItem

Grid and GridItem are components used for grid layout.

TextGroup, Text

Text is a component used to display text elements.

Props (Text)

• lineThrough: boolean type. If true, it has text-decoration: line-through.
• underline: boolean type. it has text-decoration: underline.
• ellipsisLines: number type. It contains some styles for text-overflow: ellipsis. The text is clipped to the number of lines specified by ellipsisLines, and ellipsis is applied.