Package Exports

robox

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (robox) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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