Awesome
glamorous-jsxstyle
Components
This package exports the components from jsxstyle
using glamorous
.
From jsxstyle
:
jsxstyle
includes components corresponding to every potential value of the CSSdisplay
property.
This package follows that same purpose and generates and exposes components named after display
properties. The list of components generated are:
View
Block
InlineBlock
InlineListItem
Flex
Row
Column
Table
InlineTable
TableRowGroup
TableHeaderGroup
TableFooterGroup
TableRow
TableCell
TableColumnGroup
TableColumn
TableCaption
Install
Install with npm
:
npm install --save glamorous-jsxstyle
This also has peer dependencies of react
and glamor
, so install those too:
npm install --save react glamor
You can then use one of the module formats:
main
: dist/glamorous-jsxstyle.cjs.js - exports itself as a CommonJS moduleglobal
: dist/glamorous-jsxstyle.umd.js and dist/glamorous-jsxstyle.umd.min.js - exports itself as aumd
module.jsnext:main
andmodule
: dist/glamorous-jsxstyle.es.js - exports itself using the ES modules specification, you'll need to configurewebpack
to make use of this file.
Usage
To use this module via CommonJS:
const { View } = require('glamorous-jsxstyle')
If you're transpiling (and/or using the jsnext:main
):
import { Flex, Block } from 'glamorous-jsxstyle'
An example use case
import React from 'react'
import { Flex, InlineBlock } from 'glamorous-jsxstyle'
export default class Example extends React.Component {
render() {
return (
<div>
<Flex>
Content in a `div` with `display: 'flex'`
</Flex>
<InlineBlock>
Content in a `div` with `display: 'inline-block'`
</InlineBlock>
// add more styles as you like
<InlineBlock style={{color: 'blue'}}>
Blue content in a `div` with `display: 'inline-block'`
</InlineBlock>
</div>
)
}
}
You can also extend the glamorous-jsxstyle
components using glamorous
with additional style objects:
const headerBG = { background: '#ddd' }
const headerCell = { minWidth: '200px' }
// use `glamorous` dynamic functions to style relative to `props`
// alternate gray and white
const alternatingRows = props => ({ background: props.rowNumber % 2 ? 'gray' : 'white' })
// underline every 5th row
const everyFifth = props => ({ textDecoration: props.rowNumber % 5 ? 'underline' : '' })
// extend with 1 or more style objects
const HeaderRow = glamorous(TableRow)(headerBG)
const HeaderCell = glamorous(TableCell)(headerCell, centeredText)
const BodyRow = glamorous(TableRow)(alternatingRows, everyFifth)
export default () => (
<div>
<HeaderRow>
<HeaderCell>Heading 1</HeaderCell>
<HeaderCell>Heading 2</HeaderCell>
<HeaderCell>Heading 3</HeaderCell>
</HeaderRow>
</div>
)
See an example of a table
made with glamorous-jsxstyle
here.
© 2017 Paul Molluzzo
MIT