react-foundation-lib

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