# styled-selector

> Get static CSS(-in-JS) selectors from React components

Latest version **0.1.1** (published 2018-10-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install styled-selector
pnpm add styled-selector
yarn add styled-selector
bun add styled-selector
```

## 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.1.1 |
| Published | 2018-10-22 |
| First published | 2018-10-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 17 |
| Author | Haz |
| Maintainers | diegohaz |
| Keywords | styled-selector |

## Links

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

## Recent versions

- 0.1.1 (latest) — 2018-10-22
- 0.1.0 — 2018-10-22

## README

# styled-selector

[![Generated with nod](https://img.shields.io/badge/generator-nod-2196F3.svg?style=flat-square)](https://github.com/diegohaz/nod)
[![NPM version](https://img.shields.io/npm/v/styled-selector.svg?style=flat-square)](https://npmjs.org/package/styled-selector)
[![Build Status](https://img.shields.io/travis/diegohaz/styled-selector/master.svg?style=flat-square)](https://travis-ci.org/diegohaz/styled-selector) [![Coverage Status](https://img.shields.io/codecov/c/github/diegohaz/styled-selector/master.svg?style=flat-square)](https://codecov.io/gh/diegohaz/styled-selector/branch/master)

Get static CSS(-in-JS) selectors (like `.sc-htpNat`) from React components

## Install

    $ npm i styled-selector

## Usage

### [Styled Components](https://github.com/styled-components/styled-components)
```js
import styled from "styled-components";
import s from "styled-selector";

const Comp = styled.div``;

s(Comp); // .sc-htpNat
```

### [Emotion](https://github.com/emotion-js/emotion)
```js
import styled, { css } from "react-emotion";
import s from "styled-selector";

const Comp = styled("div")``;

s(Comp); // .css-htpNat

const className = css``;

s(className); // .css-htpNat
```

### [Reuse](https://github.com/diegohaz/reuse)
```js
import styled from "styled-components";
import use from "reuse";
import s from "styled-selector";

const Comp = use(styled.div``);

s(Comp); // .sc-htpNat
```

### Custom
```jsx
import React from "react";
import s from "styled-selector";

const Comp = () => <div id="foo" />;
Comp.selector = "#foo";

s(Comp); // #foo
```

## License

MIT © [Haz](https://github.com/diegohaz)

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