Reflexbox

WARNING: Only for Infotech Group employee usage!

Responsive react flexbox grid system on steroids.

Differences from the original version 3.0.1

• Support special units (ui, md, bl) for all quantities
• Support height, (min|max)-height, (min|max)-width
• Alternate dimensions

Getting Started

npm install @infotech/reflexbox

1import React from 'react'
2import { Box } from '@infotech/reflexbox'
3
4class Component extends React.Component {
5  render() {
6    return (
7      <Box flex>
8        <Box px={2} w={1/2}>Box A</Box>
9        <Box px={2} w={1/2}>Box B</Box>
10      </Box>
11    )
12  }
13}

Usage

1// Fractional width
2<Box w={1/2} />
3
4// Pixel width
5<Box w={128} />
6
7// Responsive widths
8<Box w={[ 1, 1/2, 1/4 ]} />
9
10// Special units
11<Box w="1md" />
12
13// Padding
14<Box p={2} />
15
16// Responsive padding
17<Box p={[ 1, 2, 3 ]} />
18
19// Margin
20<Box m={2} />
21
22// Responsive margin
23<Box m={[ 1, 2, 3 ]} />
24
25// top, right, bottom, left
26<Box
27  mt={1}
28  mr={2}
29  mb={3}
30  ml={2}
31/>
32
33// x-axis
34<Box mx={-2} />
35
36// y-axis
37<Box my={3} />
38
39// min/max width, min/max-height
40<Box
41  minw="1ui"
42  maxw="2bl"
43  minh="1md"
44  maxw="5bl"
45/>
46
47// align-items: center
48<Flex align='center' />
49
50// justify-content: space-between
51<Flex justify='space-between' />
52
53// Flex wrap
54<Flex wrap />
55
56// Flex direction column
57<Flex column />
58
59// Order
60<Box order={2} />
61
62// flex: 1 1 auto
63<Box auto />

API

<Box />

Primitive for controlling width, height, margin, padding and more.

Props

Both <Flex /> and <Box /> share the same props.

• w (number|array|string) sets width, where numbers 0-1 are percentage values, larger numbers are pixel values, and strings are raw CSS values with units.
• h (number|array|string) sets height in the same way as width
• minw (number|array|string) sets min-width
• maxw (number|array|string) sets max-width
• minh (number|array|string) sets min-height
• maxh (number|array|string) sets max-height
• 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 special units, and 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.

1// Set widths for different breakpoints, starting from smallest to largest
2// This example will be 100% width below the smallest breakpoint,
3// then 50% and 25% for the next two breakpoints respectively
4<Box w={[ 1, 1/2, 1/4 ]} />

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

1<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.

1import React from 'react'
2import { ReflexProvider, Flex, Box } from '@infotech/reflexbox'
3
4const space = [ 0, 6, 12, 18, 24 ]
5const breakpoints = [ 32, 48, 64 ]
6
7class App extends React.Component {
8  render () {
9    return (
10      <ReflexProvider
11        space={space}
12        breakpoints={breakpoints}>
13        <Flex mx={-2}>
14          <Box w={1/4} px={2}>Box</Box>
15          <Box w={1/4} px={2}>Box</Box>
16          <Box w={1/4} px={2}>Box</Box>
17          <Box w={1/4} px={2}>Box</Box>
18        </Flex>
19      </ReflexProvider>
20    )
21  }
22}

Higher Order Component

The core Reflexbox higher-order component can be used on any element that accepts className as a prop.

1import React from 'react'
2import { reflex } from '@infotech/reflexbox'
3import MyInput from './MyInput'
4
5const FlexInput = reflex(MyInput)
6
7const App = () => (
8  <div>
9    <FlexInput
10      w={1/2}
11      mb={2}
12      defaultValue='Flex Input'
13    />
14  </div>
15)

MIT License