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 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.
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>
)
}
}
- Jared Palmer @jaredpalmer
MIT License