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>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