0.1.2 • Published 7 years ago
snab-style v0.1.2
snab-style
Snabbdom elements that accept styles as props
Overview
snab-style
is a conceptual port of jsxstyle
to Snabbdom. It exports a series of common elements like Row
and Column
with their styles baked-in. Additionally, each element accepts additional styles as simple props; JSX is much easier to read when each node isn't littered with style = {{ }}
.
Unlike jsxstyle
, all styles are assigned inline (via element.style
). There's no sorcery to extract values into a stylesheet.
Example
<InflexibleRow
backgroundColor = '#DADADA'
>
This is some content
</InflexibleRow>
is equivalent to
<div
style = {
{
// Default styles for InflexibleRow
display: 'flex',
flexDirection: 'row',
flex: 'none',
// Assigned via props
backgroundColor: '#DADADA'
}
}
>
This is some content
</div>
Elements
Block
Flex
Row
Column
InflexibleRow
InflexibleColumn
FlexibleRow
FlexibleColumn
CenteredRow
CenteredColumn
MaterialIcon
To see an real extension written with these elements, check out the midicast source code.
Installation
yarn add snab-style