snab-style
TypeScript icon, indicating that this package has built-in type declarations

0.1.2 • Public • Published

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

License

Apache 2.0

Package Sidebar

Install

npm i snab-style

Weekly Downloads

1

Version

0.1.2

License

Apache-2.0

Last publish

Collaborators

  • appsforartists