# stylist-react

> theme first, fully static styled component for react

Latest version **2.0.0-beta.14** (published 2019-11-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install stylist-react
pnpm add stylist-react
yarn add stylist-react
bun add stylist-react
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0-beta.14 |
| Published | 2019-11-16 |
| First published | 2019-01-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 651.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Mo Wang |
| Maintainers | marty_wang |

## Links

- npm: https://www.npmjs.com/package/stylist-react
- Repository: https://github.com/marty-wang/stylist-react
- Homepage: https://github.com/marty-wang/stylist-react#readme
- Issues: https://github.com/marty-wang/stylist-react/issues
- npm.io page: https://npm.io/package/stylist-react

## Dependencies (1)

- [typestyle](https://npm.io/package/typestyle.md) ^2.0.1

## Recent versions

- 2.0.0-beta.14 (latest) — 2019-11-16
- 2.0.0-beta.16 (beta) — 2020-01-06
- 2.0.0-beta.15 — 2019-12-03
- 2.0.0-beta.12 — 2019-11-16
- 1.2.7 — 2019-10-25
- 2.0.0-beta.11 — 2019-10-22
- 2.0.0-beta.10 — 2019-10-22
- 2.0.0-beta.9 — 2019-10-22
- 2.0.0-beta.8 — 2019-10-20
- 2.0.0-beta.7 — 2019-10-20
- 2.0.0-beta.6 — 2019-10-20
- 2.0.0-beta.5 — 2019-10-20
- 2.0.0-beta.4 — 2019-10-20
- 2.0.0-beta.3 — 2019-10-20
- 2.0.0-beta.2 — 2019-10-20
- … 13 more at https://npm.io/package/stylist-react/versions

## README

# stylist
Theming first, fully static typed styled component library for React. 

## How to

1. Create your own stylist factory

```typescript
import { stylistFactory } from 'stylist-react';

/**
 * @param {string} namespace It allows multiple stylist factory.
 * @param {object} initialThemeConfig The configuration to build the initial theme. It can be empty if you are not yet ready for theming your app.
 * @param {function} buildThemeFunction It produces the actual theme for the given theme configuration
 * @returns {getStylist, setTheme} getStylist returns the stylist that can create styled components. setTheme can change themes.
 */
export const { getStylist, setTheme } = stylistFactory('MyNamespace', initialThemeConfig, buildThemeFunction);
```

2. Use getStylist to create style components. Keep in mind that stylist is always scoped to a component and is used to create styled sub-components to compose the aforementioned component

```typescript
// MyComponent.tsx

const { styleDiv } = getStylist('MyComponent');

const Root = styleDiv("Root", theme => ({
    height: "100vh",
    padding: "16px",
    background: theme.backgroundColor,
    color: theme.foregroundColor
}));

export class MyComponent extends React.Component {
    public render() {
      return (
          <Root>
          {this.props.children}
          </Root>
      );
    }
}
```

For details, Please take a look at the demo folder.

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