Presentation Components

Some presentation components to make building layouts easier.

Installation

yarn add @alexseitsinger/react-presentation-components

Oritentations

Column

An element which shares the parent element's width, but occupies 100% of the parent's height.

Props

Name | Description | Default | Required? --- | --- | --- | --- isMaximized | Should the column use 100% height? | false | no isVerticallyCentered | Should the content be vertically centered? | false | no direction | Flexbox direction for children to use. | row | no

Row

An element which shares the parent element's height, but occupies 100% of the parent's width.

Props

Name | Description | Default | Required? --- | --- | --- | --- direction | The direction that children should use. | row | no isMaximized | Should the row fill 100% width? | true | no spacing | Space within the element. | 0px | no ends | Should the two contained elements grip the left and right sides? | false | no

Positions

All grips take the following props:

Name | Description | Default | Required? --- | --- | --- | --- children | Elements to render within | undefined | yes containerStyle | Extra css to apply to the container element | undefined | no isMaximized | Maximize the primary direction | undefined | no

GripBottom

Positions itself to the bottom edge of the parent element.

GripRight

Positions itself to the right edge of the parent element.

Alignments

Center

Elements within are both vertically and horizontally centered.

Wrapper

A container width a max-width: 1200px, and margin: 0 auto.

Props

Name | Description | Default | Required? --- | --- | --- | --- maxWidth | Alternative value for max-width | 1200px | no minHeight | Alternative value for min-height | auto | no

VerticalAlign

Uses the flexbox model to vertically align children.

VerticallyCenter

Uses the inline-block model to vertically align children.

Lists

All lists use the following props:

Name | Description | Default | Required? --- | --- | --- | --- children | The elements to render within list items | undefined | if items, no, otherwise yes spacing | The padding to apply evenly between list items | undefined | no renderEach | Invoked to render each list item with either children or items | undefined | if items, yes, else no renderFirst | Invoked to render a list item before all others | undefined | no renderLast | Invoked to render a list item after all others | undefined | no renderNone | Invoked to render a list item when no items or children produced any output. | undefined | no listStyle | Extra css to apply to the list element. | undefined | no itemStyle | Extra css to apply to each list item element | undefined | no items | An optional list of data objects to use with renderEach to render each list item | undefined | If items, yes, else no isMaximized | Should the list height fill the parent element? | false | no

FlexList

A list of items that span across a single line using all available space.

InlineList

A list of items with equal width, that will continue to occupy space on current line, then continue onto the next.

VerticalList

A list of items, separated one per line, with each using 100% width of the parent element.

Dividers

HorizontalDivider

Displays text in the center, with a pair of horizontal lines on the left and right side which run across the center of the remaining width equally.

Props

Name | Description | Default | Required? --- | --- | --- | --- text | The text to display between the two horizontal lines. | undefined | yes textColor | The color to display the text in. | undefined | no textSpacing | The spacing to apply to the left and right of the text. | undefined | no lineSize | The height of each left and right line. | 1px | no lineColor | The color of each left and right line. | black | no containerSpacing | Additional spacing to apply to the top and bottom of the container element. | undefined | no

HorizontalRule

A single horizontal line across the width of the parent element.

Props

Name | Description | Default | Required? --- | --- | --- | --- color | The color of the line. | black | no inset | Should the line be inset? | false | no size | The height of the line. | 1px | no

RightRule

Renders text followed by a horizontal line across the center of the remaining width.

Props

Name | Description | Default | Required? --- | --- | --- | --- outerStyle | Extra css to apply to the outer container. | {} | no innerStyle | Extra css to apply to the inner container. | {} | no children | Elements to render before the line. | undefined | yes ruleColor | Color of the line. | black | no ruleSize | The height of the line. | 1px no

VerticalBuffer

A DOM element, which allows for vertical spacing in multiple of the root font-size.

Props

Name | Description | Default | Required? --- | --- | --- | --- size | The height of the vertical buffer. | 1rem | no

Misc

Menu

A container with button to toggle the menu's list item visibility.

Props

Name | Description | Default | Required? onClick | Toggles the visibility of the menu's list items. | undefined | yes children | The elements to render within the menu's list. | undefined | yes

Box

An element with equal width and height.

Props

Name | Description | Default | Required? --- | --- | --- | --- size | The size(px) to use for the width and height | undefined | yes children | Elements to render | undefined | yes isCentered | Should the box be centered within its parent | undefined | no containerSyle | Extra css to apply to the container element. | undefined | no bodyStyle | Extra css to apply to the body element. | undefined | no