Robox

Higher-order React component for adding style helper props based on understyle

npm i robox

// Example component
import React from 'react'
import Robox from 'robox'

const Button = (props) => {
  return <button {...props} />
}

export default Robox(Button)

// Example component instance

<div>
  <Button
    m={2}
    p={2}
    onClick={e => alert('hello')}
    children='Hello' />
</div>

Props

Margin

Sets margin based on a 0–6 spacing scale array [0, 8, 16, 32, 48, 64, 96]

prop	type	description
m	number	margin
mt	number	margin-top
mr	number	margin-right
mb	number	margin-bottom
ml	number	margin-left
mx	number	margin-left and margin-right
my	number	margin-top and margin-bottom

Padding

Sets padding based on the same spacing scale

prop	type	description
p	number	padding
pt	number	padding-top
pr	number	padding-right
pb	number	padding-bottom
pl	number	padding-left
px	number	padding-left and padding-right
py	number	padding-top and padding-bottom

Width

Sets percentage-based width based on a 12 column grid

prop	type	description
col	number	0-12

Display

Sets display based on the prop name

prop	type
block	boolean
inlineBlock	boolean
inline	boolean
table	boolean
tableRow	boolean
tableCell	boolean
flex	boolean
inlineFlex	boolean

Flexbox

Sets various flexbox layout properties

prop	type	description
wrap	boolean	flex-wrap: wrap
align	string	align-items
justify	string	justify-content
flexColumn	boolean	flex-direction: column
flexAuto	boolean	flex: 1 1 auto
flexNone	boolean	flex: none
order	number	order

Configuration

The space scale and number of grid columns can be configured through React context.

// Example context configuration
class App extends React.Component {
  getChildContext () {
    return {
      robox: {
        scale: [0, 6, 12, 18, 24, 30, 36],
        columns: 16
      }
    }
  }
}

App.contextTypes = {
  robox: React.PropTypes.object
}

MIT License