Nonchalant Programming Master

    emotion-jsxstyle

    1.2.0 • Public • Published

    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 alignItems="center">
        <Block padding="1rem" color="red" >
          Hello
        </Block>
        <Block margin="2rem" background="#b7b7b7">
         Goodbye
        </Block>
      </Row>
    )

    Component Primitives

    • <Block>
    • <InlineBlock>
    • <Inline>
    • <Flex>
    • <Row>
    • <Col>
    • <InlineFlex>
    • <Grid>
    • <Box>

    Props

    • 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.

    Refs

    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> 
        )
      }
    }

    Author


    MIT License

    Install

    npm i emotion-jsxstyle

    DownloadsWeekly Downloads

    16

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    9.97 kB

    Total Files

    12

    Last publish

    Collaborators

    • jaredpalmer