redux-devtools/packages/react-base16-styling
renovate[bot] 06a1913b69
fix(deps): update all non-major dependencies (#1070)
* fix(deps): update all non-major dependencies

* Combine msw

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Nathan Bierema <nbierema@gmail.com>
2022-01-31 01:37:35 +00:00
..
src Imprrove ability to tree-shake libraries (#1050) 2022-01-24 02:11:46 +00:00
test Use types in tscnofig to explicitly define global types (#1045) 2022-01-22 21:51:27 +00:00
.eslintignore Imprrove ability to tree-shake libraries (#1050) 2022-01-24 02:11:46 +00:00
.eslintrc.js Use types in tscnofig to explicitly define global types (#1045) 2022-01-22 21:51:27 +00:00
babel.config.esm.json Imprrove ability to tree-shake libraries (#1050) 2022-01-24 02:11:46 +00:00
babel.config.json Imprrove ability to tree-shake libraries (#1050) 2022-01-24 02:11:46 +00:00
CHANGELOG.md Cleanup existing changelogs and add major versions 2022-01-30 17:31:00 -05:00
jest.config.js Use types in tscnofig to explicitly define global types (#1045) 2022-01-22 21:51:27 +00:00
LICENSE.md chore(*): add back license files (#578) 2020-08-09 01:11:43 -04:00
package.json fix(deps): update all non-major dependencies (#1070) 2022-01-31 01:37:35 +00:00
README.md chore(*): remove Travis (#864) 2021-09-17 15:02:33 +00:00
tsconfig.json Imprrove ability to tree-shake libraries (#1050) 2022-01-24 02:11:46 +00:00
tsconfig.test.json Use types in tscnofig to explicitly define global types (#1045) 2022-01-22 21:51:27 +00:00

react-base16-styling Latest Stable Version

React styling with base16 color scheme support

Inspired by react-themeable, this utility provides flexible theming for your component with base16 theme support.

Install

yarn add react-base16-styling

Usage

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

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

function(themeOrStyling, base16Themes)

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

invertBase16Theme

function(base16Theme)

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

invertTheme

function(theme)

Helper method that inverts a theme or styling object to be passed into the themeOrStyling parameter of createStyling.