Higher-order React component for adding style helper props based on understyle
JavaScript
Latest commit 8a64a3e Aug 1, 2016 @jxnblk Bump version
Permalink
Failed to load latest commit information.
src Add border-box style Jul 30, 2016
test Add border-box style Jul 30, 2016
.babelrc Init Jul 26, 2016
.gitignore Init Jul 26, 2016
.npmignore Init Jul 26, 2016
.travis.yml Init Jul 26, 2016
README.md Fix badge typo Aug 1, 2016
compositor.json Update compositor.json Jul 26, 2016
package.json Bump version Aug 1, 2016

README.md

Robox

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

<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