jsxstyle primitives powered by emotion
npm i emotion react-emotion emotion-jsxstyle
import React from 'react'
import { Block, Row } from 'emotion-jsxstyle'
const App = () => (
<Row alignItems="center">
<Block padding="1rem" color="red" >
Hello
</Block>
<Block margin="2rem" background="#b7b7b7">
Goodbye
</Block>
</Row>
)
<Block>
<InlineBlock>
<Inline>
<Flex>
<Row>
<Col>
<InlineFlex>
<Grid>
<Box>
component
: specify the underlying DOM element. Defaults to div
props
: If you need to pass props to the underlying component, you can pass them through a special props
props (just like jsxstyle).css
: If you prefer the glamor css object syntax instead of just props, you can pass styles to a css
prop. Useful for media queries etc.Just pass refs to props
prop.
import React from 'react'
import { Col, Block } from 'emotion-jsxstyle'
class App extends React.Component {
render() {
return (
<Col>
<Block component="input" name="thing" props={{
ref: i => this.input = i,
defaultValue: 'Hello',
}}/>
</Col>
)
}
}
MIT License