# @mcrowe/styled

> Style components in pure Javascript

Latest version **0.0.5** (published 2017-06-29) · ISC license · 0 weekly downloads

## Install

```sh
npm install @mcrowe/styled
pnpm add @mcrowe/styled
yarn add @mcrowe/styled
bun add @mcrowe/styled
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2017-06-29 |
| First published | 2017-05-23 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Mitch Crowe |
| Maintainers | mcrowe |

## Links

- npm: https://www.npmjs.com/package/@mcrowe/styled
- Repository: https://github.com/mcrowe/styled
- Homepage: https://github.com/mcrowe/styled#readme
- Issues: https://github.com/mcrowe/styled/issues
- npm.io page: https://npm.io/package/@mcrowe/styled

## Recent versions

- 0.0.5 (latest) — 2017-06-29
- 0.0.4 — 2017-06-29
- 0.0.3 — 2017-06-25
- 0.0.2 — 2017-06-18
- 0.0.1 — 2017-05-23

## README

# styled

Styled components for React in pure Javascript. Works with React and React Native. Because [styled-components](https://github.com/styled-components/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

```js
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.

---
_Source: https://npm.io/package/@mcrowe/styled · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._