understyle
Functional style utilities for authoring JavaScript style objects
npm i understyle
// Example
import _style from 'understyle'
const style = _style({
m: 2,
flex: true
})
// { margin: 16, display: 'flex' }
// Individual modules
import { margin, padding } from 'understyle'
const style = {
...margin({ m: 2 }),
...padding({ p: 2 })
}
// { margin: 16, padding: 16 }
Usage in React
Understyle is intended for use in functional component-based UI systems, like React.
// Example component
import React from 'react'
import _style from 'understyle'
const MyComponent = ({ children, ...props }) => {
const style = {
..._style(props),
color: 'tomato'
}
return <div style={style}>{children}</div>
}
export default MyComponent
// Example component instance
return (
<div>
<MyComponent p={2} mb={4}>
Hello
</MyComponent>
</div>
)
Functions
Each function accepts its own unique set of shorthand options to create style objects
margin
import { margin } from 'understyle'
const style = margin({ m: 1 })
// { margin: 8 }
Each option should be a number from 0–6, which will return a value based on a spacing scale
array [0, 8, 16, 32, 48, 64, 96]
.
Negative numbers return negative values, and 'auto'
will return margin: auto
.
Props:
m
:margin
mt
:marginTop
mr
:marginRight
mb
:marginBottom
ml
:marginLeft
mx
:marginLeft
&marginRight
my
:marginTop
&marginBottom
gutter
: negativemarginLeft
&marginRight
padding
Padding uses the same spacing scale array
import { padding } from 'understyle'
const style = padding({ p: 1 })
// { padding: 8 }
Props:
p
:padding
pt
:paddingTop
pr
:paddingRight
pb
:paddingBottom
pl
:paddingLeft
px
:paddingLeft
&paddingRight
py
:paddingTop
&paddingBottom
column
import { column } from 'understyle'
const style = column({ col: 6 })
// { width: '50%' }
The col
option should be a number from 1–12 to return a percentage-based width based on a 12 column grid.
display
import { display } from 'understyle'
const style = display({ inlineBlock: true })
// { display: 'inline-block' }
Each display option should be a boolean.
Props:
block
inlineBlock
inline
table
tableRow
tableCell
flex
inlineFlex
flex
import { flex } from 'understyle'
const style = flex({
align: 'center',
justify: 'center'
})
// { alignItems: 'center', justifyContent: 'center' }
The flex options are a mix of booleans and strings to set various flexbox style properties.
Props:
wrap
boolean - setsflexWrap: 'wrap'
align
string - setsalignItems
justify
string - setsjustifyContent
flexColumn
boolean - setsflexDirection: 'column'
flexAuto
boolean - setsflex: '1 1 auto'
flexNone
boolean - setsflex: 'none'
MIT License