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'  class Component extends React.Component {   render() {     return (       <Flex p={2} align='center'>         <Box px={2} w={1/2}>Box A</Box>         <Box px={2} w={1/2}>Box B</Box>       </Flex>     )   } }

Usage

// Fractional width <Box w={1/2} />  // Pixel width <Box w={128} />  // Responsive widths <Box w={[ 1, 1/2, 1/4 ]} />  // Padding <Box p={2} />  // Responsive padding <Box p={[ 1, 2, 3 ]} />  // Margin <Box m={2} />  // Responsive margin <Box m={[ 1, 2, 3 ]} />  // top, right, bottom, left <Box   mt={1}   mr={2}   mb={3}   ml={2} />  // x-axis <Box mx={-2} />  // y-axis <Box my={3} />  // align-items: center <Flex align='center' />  // justify-content: space-between <Flex justify='space-between' />  // Flex wrap <Flex wrap />  // Flex direction column <Flex column />  // Order <Box order={2} />  // flex: 1 1 auto <Box auto />

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) sets display: flex
wrap (boolean) sets flex-wrap: wrap
column (boolean) sets flex-direction: column
auto (boolean) sets flex: 1 1 auto
order (number) sets order
align (string) sets align-items
justify (string) sets justify-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 w={[ 1, 1/2, 1/4 ]} />

Null values can be passed to the array to skip a breakpoint.

<Box w={[ 1, null, 1/2 ]} />

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 ]  class App extends React.Component {   render () {     return (       <ReflexProvider         space={space}         breakpoints={breakpoints}>         <Flex mx={-2}>           <Box w={1/4} px={2}>Box</Box>           <Box w={1/4} px={2}>Box</Box>           <Box w={1/4} px={2}>Box</Box>           <Box w={1/4} px={2}>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 = reflex(MyInput)  const App = () => (   <div>     <FlexInput       w={1/2}       mb={2}       defaultValue='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.

MIT License

React Flexbox Layout And Grid System – Reflexbox