React Base16 Styling

Common errors

• TypeError: Cannot read properties of undefined (reading 'base00')

  cause The `base16Theme` object passed to `getStylingFromBase16` or referenced within it is undefined or missing expected properties.
  fix Ensure `base16Themes` are correctly imported and structured, and that the `theme` prop passed to your component (which `createStylingFromTheme` uses) is a valid `base16` theme name or object.

• Module not found: Can't resolve 'react-base16-styling'

  cause The package is not installed or the import path is incorrect.
  fix Run `npm install react-base16-styling` or `yarn add react-base16-styling`. Verify the import statement exactly matches `import { ... } from 'react-base16-styling';`.

• Styling is not applied to my component.

  cause Styling functions are returning an incorrect format, or the `styling` utility is not correctly destructured and spread onto the element.
  fix Ensure that styling functions return an object like `{ style: { ... }, className: '...' }` and that the spread operator `...styling('myComponent')` is correctly applied to your React element.

Warnings

• breaking The package is effectively abandoned, with its last commit and release dating back to late 2017. This means it receives no updates for bugs, security vulnerabilities, or compatibility with newer React versions or JavaScript features.
  Fix: Avoid using this package for new projects. For existing projects, consider migrating to a actively maintained styling solution like Styled Components, Emotion, or Tailwind CSS.
• gotcha This library relies on older React class components and may not integrate well with modern React Hooks or Context API for theme propagation. Theme changes often require prop drilling or integration with external state management.
  Fix: If integrating with a modern React application, theme management might require additional boilerplate to pass themes through props or use an older context API approach.
• gotcha Due to its age, `react-base16-styling` likely ships as a CommonJS module. While documentation shows ES Module `import` syntax, this is typically handled by bundlers. Direct ESM consumption in environments like Node.js ESM projects may lead to module resolution issues.
  Fix: Ensure your build setup (e.g., Webpack, Rollup, Parcel) is configured to handle CommonJS modules from `node_modules`. If you encounter 'Module not found' or 'require is not defined' errors in a pure ESM environment, consider using a compatibility layer or a different package.

Install

• npm install react-base16-styling npm
• yarn add react-base16-styling yarn
• pnpm add react-base16-styling pnpm

Imports

• createStyling
  wrong:

  const createStyling = require('react-base16-styling').createStyling;

  correct:

  import { createStyling } from 'react-base16-styling';

  While CommonJS might work via transpilers, modern usage and documentation favor ES Modules. The package is very old, so native ESM support is unlikely; it likely ships CJS.
• getBase16Theme
  wrong:

  import getBase16Theme from 'react-base16-styling/lib/getBase16Theme';

  correct:

  import { getBase16Theme } from 'react-base16-styling';

  All helper utilities are named exports from the main package entry point.
• invertBase16Theme
  wrong:

  const { invertBase16Theme } = require('react-base16-styling');

  correct:

  import { invertBase16Theme } from 'react-base16-styling';

  A named import is the standard way to access this helper function.

Quickstart

This quickstart demonstrates how to set up `createStyling` with base16 themes and apply dynamic styles within a React class component. It shows both static style objects and functions for conditional styling.

import React, { Component } from 'react';
import { createStyling } from 'react-base16-styling';

// Mock base16Themes for runnable example
const base16Themes = {
  solarized: {
    base00: '#002b36', // Dark background
    base01: '#073642',
    base02: '#586e75',
    base03: '#657b83',
    base04: '#839496',
    base05: '#93a1a1', // Light foreground
    base06: '#eee8d5',
    base07: '#fdf6e3',
    base08: '#dc322f',
    base09: '#cb4b16',
    base0A: '#b58900',
    base0B: '#859900',
    base0C: '#2aa198',
    base0D: '#268bd2',
    base0E: '#6c71c4',
    base0F: '#d33682'
  }
};

function getStylingFromBase16(base16Theme) {
  return {
    myComponent: {
      backgroundColor: base16Theme.base00,
      color: base16Theme.base05, // Added for readability
      padding: '10px',
      borderRadius: '5px'
    },

    myComponentToggleColor({ style, className }, clickCount) {
      return {
        style: {
          ...style,
          backgroundColor: clickCount % 2 === 0 ? base16Theme.base0D : base16Theme.base08, // Using base16 colors
          color: 'white',
          padding: '5px',
          marginTop: '10px'
        },
        className
      };
    }
  };
}

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')} style={{ width: '300px', margin: '20px auto', textAlign: 'center' }}>
        <p>This is a themed component.</p>
        <button onClick={() => this.setState({ clickCount: clickCount + 1 })} style={{ padding: '8px 15px', cursor: 'pointer' }}>
          Click Me
        </button>
        <div {...styling('myComponentToggleColor', clickCount)}>
          Click Count: {clickCount}
        </div>
      </div>
    );
  }
}

export default MyComponent; // Export for use in a larger app