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

timsnadden/robox