react-foundation-components

A collection of Foundation components for react

Components

List

• Button
• Column
• Divider
• Expand
• Icon
• Menu
• MenuItem
• MenuText
• NumberField
• Row
• TextArea
• TextField
• Title

Features

|Component |Core |Style |Input & Events |Other| |-----------------|----------------------------------------------------|---------------------------|----------------------------------------------------------------------------------|---| |Button |ClassNames, Visibility| |MouseEvents, Link, Disabled |Float| |Column |ClassNames, Visibility|ColumnStyle| | | |Divider |ClassNames, Visibility| | | | |Expand |ClassNames, Visibility| | | | |Icon |ClassNames, Visibility|IconStyle | | | |Menu |ClassNames, Visibility|MenuStyle | |ContentExpand, Alignment, Orientation| |MenuItem |ClassNames, Visibility| |MouseEvents, Link |Active| |MenuText |ClassNames, Visibility| | | | |NumberField|ClassNames, Visibility| |DataEvents, Disabled, InputField=number| | |Row |ClassNames, Visibility|RowStyle | |ContentExpand, Gutters| |TextArea |ClassNames, Visibility| |DataEvents, Disabled, InputField=string| | |TextField |ClassNames, Visibility| |DataEvents, Disabled, InputField=string| | |Title |ClassNames, Visibility| | | |

Types & Enums

Alignment Enum

• Left
• Right
• Center
• None

Size Enum

• Small
• Medium
• Large
• XLarge
• XXLarge

Column Integer Type

number of columns to span

Acceptable Values: 1..12

Feature Description and Props

ClassNames

props

|prop|type| |---|---| |className| string | |innerClassName| string |

Visibility

props

|prop|type| |---|---| |show|bool|

Float

props

|prop|type| |---|---| |float|ALIGNMENT|

Disabled

props

|prop|type|default| |---|---|---| |disabled|bool|false|

MouseEvents

props

|prop|type| |---|---| |onClick|function|

DataEvents

props

|prop|type| |---|---| |onChange|function|

InputField

props

|prop|type|default| |---|---|---| |value|string or number| | |label|string|null| |isInline|bool| |

Alignment

props

|prop|type| |---|---| |alignment|ALIGNMENT|

Active

props

|prop|type| |---|---| |isActive|bool|

Orientation

props

|prop|type| |---|---| |isVertical|bool| |isHorizontal|bool| |verticalOn|SIZE or [SIZE, ...]| |horizontalOn|SIZE or [SIZE, ...]|

ContentExpand

props

|prop|type| |---|---| |isExpanded|bool|

MenuStyle

props

|prop|type| |---|---| |isSimple|bool| |isNested|bool| |iconTop|bool|

IconStyle

props

|prop|type| |---|---| |icon|string|

RowStyle

notes

xlargeUp and xxlargeUp only work if specified in foundation settings

see foundation docs

$breakpoint-classes: (small medium large xlarge);

props

|prop|type| |---|---| |smallUp|COLUMN| |mediumUp|COLUMN| |largeUp|COLUMN| |xlargeUp|COLUMN| |xxlargeUp|COLUMN| |isColumn|bool|

Gutters

props

|prop|type| |---|---| |isCollapsed|bool| |collapseOn|SIZE or [SIZE, ...]| |uncollapseOn|SIZE or [SIZE, ...]|

ColumnStyle

notes

xlargeUp and xxlargeUp only work if specified in foundation settings

see foundation docs

$breakpoint-classes: (small medium large xlarge);

props

|prop|type| |---|---| |small|COLUMN| |medium|COLUMN| |large|COLUMN| |xlarge|COLUMN| |xxlarge|COLUMN| |centerOn|SIZE or [SIZE, ...]| |uncenterOn|SIZE or [SIZE, ...]| |offsetOn|[SIZE, COLUMN] or [[SIZE, COLUMN], ...]| |pushOn|[SIZE, COLUMN] or [[SIZE, COLUMN], ...]| |pullOn|[SIZE, COLUMN] or [[SIZE, COLUMN], ...]| |isEnd|bool|

Link

notes

requires the use of react-router

props

|props|type| |---|---| |link|string|

context

|context|type| |---|---| |router|react-router object|

Attributions

Inspired by react-foundation and react-slingshot