Skip to content
This repository has been archived by the owner. It is now read-only.
Higher-order React component for adding style helper props based on understyle
Branch: master
Clone or download
Latest commit 8a64a3e Aug 1, 2016
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Add border-box style Jul 30, 2016
.babelrc Init Jul 26, 2016
compositor.json Update compositor.json Jul 26, 2016


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

Build Status js-standard-style

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

    onClick={e => alert('hello')}
    children='Hello' />



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


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


Sets percentage-based width based on a 12 column grid

prop type description
col number 0-12


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


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


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

You can’t perform that action at this time.