# react-base16-styling

> React styling with base16 color scheme support

Latest version **0.10.0** (published 2024-04-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-base16-styling
pnpm add react-base16-styling
yarn add react-base16-styling
bun add react-base16-styling
```

## Health

**Score 50/100 (C)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score; popular repo.

Warnings: low downloads; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.10.0 |
| Published | 2024-04-07 |
| First published | 2016-04-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 97 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 14370 |
| Author | Alexander |
| Maintainers | timdorr, alexkuz, methuselah96 |
| Keywords | react, theme, base16, styling |

## Links

- npm: https://www.npmjs.com/package/react-base16-styling
- Repository: https://github.com/reduxjs/redux-devtools
- Homepage: https://github.com/reduxjs/redux-devtools/tree/master/packages/react-base16-styling
- Issues: https://github.com/reduxjs/redux-devtools/issues
- npm.io page: https://npm.io/package/react-base16-styling

## Dependencies (4)

- [color](https://npm.io/package/color.md) ^4.2.3
- [csstype](https://npm.io/package/csstype.md) ^3.1.3
- [lodash-es](https://npm.io/package/lodash-es.md) ^4.17.21
- [@types/lodash](https://npm.io/package/@types/lodash.md) ^4.17.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.10.0 (latest) — 2024-04-07
- 0.9.1 — 2022-01-25
- 0.9.0 — 2022-01-10
- 0.8.2 — 2022-01-08
- 0.8.1 — 2021-11-06
- 0.8.0 — 2020-09-07
- 0.7.0 — 2020-08-14
- 0.6.0 — 2017-12-14
- 0.5.3 — 2017-03-12
- 0.5.2 — 2017-03-12
- 0.5.1 — 2017-03-10
- 0.5.0 — 2017-03-05
- 0.4.7 — 2017-01-28
- 0.4.6 — 2016-09-18
- 0.4.5 — 2016-08-21
- … 10 more at https://npm.io/package/react-base16-styling/versions

## README

# react-base16-styling [![Latest Stable Version](https://img.shields.io/npm/v/react-base16-styling.svg)](https://www.npmjs.com/package/react-base16-styling)

React styling with base16 color scheme support

Inspired by [react-themeable](https://github.com/markdalgleish/react-themeable), this utility provides flexible theming for your component with [base16](https://github.com/chriskempson/base16) theme support.

## Install

```
yarn add react-base16-styling
```

## Usage

```jsx
import { createStyling } from 'react-base16-styling';
import base16Themes from './base16Themes';

function getStylingFromBase16(base16Theme) {
  return {
    myComponent: {
      backgroundColor: base16Theme.base00,
    },

    myComponentToggleColor({ style, className }, clickCount) {
      return {
        style: {
          ...style,
          backgroundColor: clickCount % 2 ? 'red' : 'blue',
        },
      };
    },
  };
}

const createStylingFromTheme = createStyling(getStylingFromBase16, {
  defaultBase16: base16Themes.solarized,
  base16Themes,
});

class MyComponent extends Component {
  state = { clickCount: 0 };
  render() {
    const { theme } = this.props;
    const { clickCount } = this.state;

    const styling = createStylingFromTheme(theme);

    return (
      <div {...styling('myComponent')}>
        <a onClick={() => this.setState({ clickCount: clickCount + 1 })}>
          Click Me
        </a>
        <div {...styling('myComponentToggleColor', clickCount)}>
          {clickCount}
        </div>
      </div>
    );
  }
}
```

## `createStyling`

```js
function(getStylingFromBase16, defaultStylingOptions, themeOrStyling)
```

| Argument                | Signature                         | Description                                                                                                                                                        |
| ----------------------- | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `getStylingFromBase16`  | `function(base16Theme)`           | creates object with default stylings for your component, using provided base16 theme.                                                                              |
| `defaultStylingOptions` | `{ defaultBase16, base16Themes }` | optional parameters, allow to set default `base16` theme and additional `base16` themes for component.                                                             |
| `themeOrStyling`        | `string` or `object`              | `base16` theme name, `base16` theme object or styling object. Theme name can have a modifier: `"themeName:inverted"` to invert theme colors (see [[#invertTheme]]) |

Styling object values could be: - objects (treated as style definitions) - strings (class names) - functions (they may be provided with additional parameters and should return object { style, className })

## `getBase16Theme`

```js
function(themeOrStyling, base16Themes)
```

Helper method that returns `base16` theme object if `themeOrStyling` is `base16` theme name or theme object.

## `invertBase16Theme`

```js
function(base16Theme)
```

Helper method that inverts `base16` theme colors, creating light theme out of dark one or vice versa.

## `invertTheme`

```js
function(theme)
```

Helper method that inverts a theme or styling object to be passed into the `themeOrStyling` parameter of [createStyling](#createstyling).

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