React flexbox layout and grid system, built with stateless components and inline styles
npm install reflexbox
// Example
import React from 'react'
import { Flex, Box } from 'reflexbox'
class Component extends React.Component {
render() {
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.
A component that creates a flexbox context to control layout of children.
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
A component that sets padding and width that works independently or as a child component of <Flex />.
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. *
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 ***
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.
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.
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.
Values for the spacing scale and breakpoints can be configured with React Context.
To configure reflexbox, add childContextTypes
and getChildContext
to a container component.
class App extends React.Component {
static childContextTypes = {
reflexbox: React.PropTypes.object
}
getChildContext () {
return {
reflexbox: {
scale: [0, 10, 20, 40, 80],
breakpoints: {
mobile: '(min-width: 30em)',
tablet: '(min-width: 48em)',
desktop: '(min-width: 60em)'
}
}
}
}
render () {
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>
)
}
}
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>
Runs tests with React shallow rendering and browser tests with Karma for four different breakpoints.
npm test