Package Exports

react-base16-styling

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-base16-styling) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-base16-styling

React styling with base16 color scheme support

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

Install

npm i -S 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, invertTheme } = this.props;
    const { clickCount } = this.state;
    
    const styling = createStylingFromTheme(theme, invertTheme);
    
    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, isLightTheme)

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
`invertTheme`	`boolean`	if `true`, theme colors are inverted, creating light version of the theme

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.