reflexbox
React flexbox layout and grid system, built with stateless components and inline styles
Getting Started
npm install reflexbox
// Example Component { return <Box p=2> <Flex align='center'> <Box px=2>Box A</Box> <Box px=2 auto>Box B</Box> </Flex> </Box> }
Reflexbox is composed of two React v0.14 stateless function components that can handle virtually any layout composition.
<Flex />
A component that creates a flexbox context to control layout of children.
Props
wrap
(boolean) Setsflex-wrap: wrap
.column
(boolean) Setsflex-direction: column
.align
(string) Setsalign-item
. Accepted values:stretch
,center
,baseline
,flex-start
,flex-end
justify
(string) Setsjustify-content
. Accepted values:center
,space-around
,space-between
,flex-start
,flex-end
gutter
(number) Sets negative left and right margins to compensate for <Box /> padding.sm
(boolean) Setsdisplay: flex
only above the small breakpoint *md
(boolean) Setsdisplay: flex
only above the medium breakpoint *lg
(boolean) Setsdisplay: flex
only above the large breakpoint *auto
(boolean) Setsflex: 1 1 auto
<Box />
A component that sets padding and width that works independently or as a child component of <Flex />.
Props
auto
(boolean) Setsflex: 1 1 auto
flex
(boolean) Setsdisplay: flex
align
(string) Setsalign-self
propertyorder
(number) Setsorder
propertycol
(number) Sets width and flex-basis based on a twelve column grid.sm
(number) Sets width and flex-basis above the small breakpoint based on a twelve column grid. *md
(number) Sets width and flex-basis above the medium breakpoint based on a twelve column grid. *lg
(number) Sets width and flex-basis above the large breakpoint based on a twelve column grid. *
Shared Props
Both <Box /> and <Flex /> accept the following props:
is
(element or node) Passes in a custom element or componentm
(number) Sets margin based on a scale from 0 – 4. **mx
(number) Sets x-axis margin based on a scale from 0 – 4. **my
(number) Sets y-axis margin based on a scale from 0 – 4. **mt
(number) Sets margin-top based on a scale from 0 – 4. **mb
(number) Sets margin-bottom based on a scale from 0 – 4. **ml
(number) Sets margin-left based on a scale from 0 – 4. **mr
(number) Sets margin-right based on a scale from 0 – 4. **p
(number) Sets padding based on a scale from 0 – 4. **px
(number) Sets x-axis padding based on a scale from 0 – 4. **py
(number) Sets y-axis padding based on a scale from 0 – 4. **pt
(number) Sets padding-top based on a scale from 0 – 4. **pb
(number) Sets padding-bottom based on a scale from 0 – 4. **pl
(number) Sets padding-left based on a scale from 0 – 4. **pr
(number) Sets padding-right based on a scale from 0 – 4. **style
(object) Assigns styles to the component ***className
(string) Adds a class to the component ***
* Breakpoint props
The sm
, md
, and lg
props are based on the keys from the config.breakpoints
object.
When setting custom values for breakpoints, these props will match the keys of the custom breakpoints
object.
** Spacing scale props
The values for padding and gutter props are based on the length of the config.scale
array.
When setting custom values for the spacing scale, the values should be from 0 through the length of the array.
*** style and className props
The style
and className
props are added as a convenience and are only recommended for adding color styles.
For other layout styles, prefer using component composition over using these props.
Configuration
Values for the spacing scale and breakpoints can be configured with React Context.
To configure reflexbox, add childContextTypes
and getChildContext
to a container component.
Component static childContextTypes = reflexbox: ReactPropTypesobject { return reflexbox: scale: 0 10 20 40 80 breakpoints: mobile: '(min-width: 30em)' tablet: '(min-width: 48em)' desktop: '(min-width: 60em)' } { return <Flex gutter=2> <Box mobile=6 tablet=3>Box</Box> <Box mobile=6 tablet=3>Box</Box> <Box mobile=6 tablet=3>Box</Box> <Box mobile=6 tablet=3>Box</Box> </Flex> }
Advanced Usage
is
prop
Change the root component of Flex or Box with the is
prop.
<Flex is=MyHeader gutter=2 align='center'> <Box is='h1' px=2 auto> Hello </Box> <Box px=2> Box </Box></Flex>
Tests
Runs tests with React shallow rendering and browser tests with Karma for four different breakpoints.
npm test