styled

Styled components for React in pure Javascript. Works with React and React Native. Because styled-components almost get it right. Styling in pure Javascript has massive simplicity advantages.

Caveat: Currently this creates inline styles on every element. This may have small performance implications depending on your app. Benchmark and decide if this is a problem.

Usage

npm install @mcrowe/styled --save

import styled from '@mcrowe/styled'

const Box = styled('div', {
  display: 'flex'
})

const Row = styled(Box, {
  flexDirection: 'row'
})

const Button = styled('button', props => ({
  padding: 12,
  backgroundColor: props.primary ? 'green' : 'gray'
}))

const MyComponent = () =>
  <Row>
    <Button>No</Button>
    <Button primary>Yes</Button>
  </Row>

Development

Install npm modules:

npm install

Run tests:

npm test

Release

Release a new version:

bin/release.sh

This will publish a new version to npm, as well as push a new tag up to github.