emotion jsxstyle
jsxstyle primitives powered by emotion
npm i emotion react-emotion emotion-jsxstyle
Usage
import React from 'react'import Block Row from 'emotion-jsxstyle' const App = <Row ="center"> <Block ="1rem" ="red" > Hello </Block> <Block ="2rem" ="#b7b7b7"> Goodbye </Block> </Row>
Component Primitives
<Block>
<InlineBlock>
<Inline>
<Flex>
<Row>
<Col>
<InlineFlex>
<Grid>
<Box>
Props
component
: specify the underlying DOM element. Defaults todiv
props
: If you need to pass props to the underlying component, you can pass them through a specialprops
props (just like jsxstyle).css
: If you prefer the glamor css object syntax instead of just props, you can pass styles to acss
prop. Useful for media queries etc.
Refs
Just pass refs to props
prop.
import React from 'react'import Col Block from 'emotion-jsxstyle' Component { return <Col> <Block ="input" ="thing" =/> </Col> }
Author
- Jared Palmer @jaredpalmer
MIT License