Reflexbox
Responsive React Flexbox Grid System
Features
- Simple API for quickly controlling layout
- Helps promote composability and separation of concerns
- CSS-in-JS built in - no external dependencies
- Only generates the CSS needed to render
Getting Started
npm install reflexbox
import React from 'react'import Flex Box from 'reflexbox' Component { return <Flex = ='center'> <Box = =>Box A</Box> <Box = =>Box B</Box> </Flex> }
Usage
// Fractional width<Box = /> // Pixel width<Box = /> // Responsive widths<Box = /> // Padding<Box = /> // Responsive padding<Box = /> // Margin<Box = /> // Responsive margin<Box = /> // top, right, bottom, left<Box = = = =/> // x-axis<Box = /> // y-axis<Box = /> // align-items: center<Flex ='center' /> // justify-content: space-between<Flex ='space-between' /> // Flex wrap<Flex /> // Flex direction column<Flex /> // Order<Box = /> // flex: 1 1 auto<Box />
API
<Flex />
Component primitive with display: flex
<Box />
Primitive for controlling width, margin, padding and more.
Props
Both <Flex />
and <Box />
share the same props.
w
(number|string) sets width, where numbers 0-1 are percentage values, larger numbers are pixel values, and strings are raw CSS values with units.flex
(boolean) setsdisplay: flex
wrap
(boolean) setsflex-wrap: wrap
column
(boolean) setsflex-direction: column
auto
(boolean) setsflex: 1 1 auto
order
(number) setsorder
align
(string) setsalign-items
justify
(string) setsjustify-content
Margin and Padding
Margin and padding props accept numbers 0-4
for values from the spacing scale [ 0, 8, 16, 32, 64 ]
.
Numbers greater than 4 will be used as pixel values.
Negative values can be used for negative margins.
Strings can be passed for other CSS values, e.g. mx='auto'
m
(number|string) margin based on a scale from 0–4.mx
(number|string) x-axis margin based on a scale from 0–4.my
(number|string) y-axis margin based on a scale from 0–4.mt
(number|string) margin-top based on a scale from 0–4.mb
(number|string) margin-bottom based on a scale from 0–4.ml
(number|string) margin-left based on a scale from 0–4.mr
(number|string) margin-right based on a scale from 0–4.p
(number|string) padding based on a scale from 0–4.px
(number|string) x-axis padding based on a scale from 0–4.py
(number|string) y-axis padding based on a scale from 0–4.pt
(number|string) padding-top based on a scale from 0–4.pb
(number|string) padding-bottom based on a scale from 0–4.pl
(number|string) padding-left based on a scale from 0–4.pr
(number|string) padding-right based on a scale from 0–4.
Responsive Array Prop Values
All props accept arrays as values for mobile-first responsive styles.
// Set widths for different breakpoints, starting from smallest to largest// This example will be 100% width below the smallest breakpoint,// then 50% and 25% for the next two breakpoints respectively<Box = />
Null values can be passed to the array to skip a breakpoint.
<Box = />
Configuration
Values for the breakpoints and space scale can be configured with React Context.
Context can be set manually or with the <ReflexProvider />
component.
import React from 'react'import ReflexProvider Flex Box from 'reflexbox' const space = 0 6 12 18 24 const breakpoints = 32 48 64 Component { return <ReflexProvider = => <Flex => <Box = =>Box</Box> <Box = =>Box</Box> <Box = =>Box</Box> <Box = =>Box</Box> </Flex> </ReflexProvider> }
Higher Order Component
The core Reflexbox higher-order component can be used on any element that accepts className
as a prop.
import React from 'react'import reflex from 'reflexbox'import MyInput from './MyInput' const FlexInput = const App = <div> <FlexInput = = ='Flex Input' /> </div>
Caveats
This currently DOES NOT work in Node.js server-side applications.
If you need server-side support, see version ^2.2.0
or one of the related libraries below.