{"id":11653,"library":"react-base16-styling","title":"React Base16 Styling","description":"react-base16-styling provides a utility for flexible theming of React components, specifically integrating with base16 color schemes. Its current and only stable version is `0.10.0`, published in late 2017. The package is effectively unmaintained, with no releases or significant code changes in over six years. It distinguishes itself by offering a `createStyling` factory that consumes `base16` themes, allowing component styles to be defined as static objects, dynamic functions returning style objects, or simple class names, inspired by `react-themeable`. Due to its age, it may not be compatible with modern React features like Hooks or the latest lifecycle methods, and lacks updates for potential security vulnerabilities or performance optimizations, making it unsuitable for new projects.","status":"abandoned","version":"0.10.0","language":"javascript","source_language":"en","source_url":"https://github.com/reduxjs/redux-devtools","tags":["javascript","react","theme","base16","styling","typescript"],"install":[{"cmd":"npm install react-base16-styling","lang":"bash","label":"npm"},{"cmd":"yarn add react-base16-styling","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-base16-styling","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"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.","wrong":"const createStyling = require('react-base16-styling').createStyling;","symbol":"createStyling","correct":"import { createStyling } from 'react-base16-styling';"},{"note":"All helper utilities are named exports from the main package entry point.","wrong":"import getBase16Theme from 'react-base16-styling/lib/getBase16Theme';","symbol":"getBase16Theme","correct":"import { getBase16Theme } from 'react-base16-styling';"},{"note":"A named import is the standard way to access this helper function.","wrong":"const { invertBase16Theme } = require('react-base16-styling');","symbol":"invertBase16Theme","correct":"import { invertBase16Theme } from 'react-base16-styling';"}],"quickstart":{"code":"import React, { Component } from 'react';\nimport { createStyling } from 'react-base16-styling';\n\n// Mock base16Themes for runnable example\nconst base16Themes = {\n  solarized: {\n    base00: '#002b36', // Dark background\n    base01: '#073642',\n    base02: '#586e75',\n    base03: '#657b83',\n    base04: '#839496',\n    base05: '#93a1a1', // Light foreground\n    base06: '#eee8d5',\n    base07: '#fdf6e3',\n    base08: '#dc322f',\n    base09: '#cb4b16',\n    base0A: '#b58900',\n    base0B: '#859900',\n    base0C: '#2aa198',\n    base0D: '#268bd2',\n    base0E: '#6c71c4',\n    base0F: '#d33682'\n  }\n};\n\nfunction getStylingFromBase16(base16Theme) {\n  return {\n    myComponent: {\n      backgroundColor: base16Theme.base00,\n      color: base16Theme.base05, // Added for readability\n      padding: '10px',\n      borderRadius: '5px'\n    },\n\n    myComponentToggleColor({ style, className }, clickCount) {\n      return {\n        style: {\n          ...style,\n          backgroundColor: clickCount % 2 === 0 ? base16Theme.base0D : base16Theme.base08, // Using base16 colors\n          color: 'white',\n          padding: '5px',\n          marginTop: '10px'\n        },\n        className\n      };\n    }\n  };\n}\n\nconst createStylingFromTheme = createStyling(getStylingFromBase16, {\n  defaultBase16: base16Themes.solarized,\n  base16Themes\n});\n\nclass MyComponent extends Component {\n  state = { clickCount: 0 };\n  render() {\n    const { theme } = this.props;\n    const { clickCount } = this.state;\n\n    const styling = createStylingFromTheme(theme);\n\n    return (\n      <div {...styling('myComponent')} style={{ width: '300px', margin: '20px auto', textAlign: 'center' }}>\n        <p>This is a themed component.</p>\n        <button onClick={() => this.setState({ clickCount: clickCount + 1 })} style={{ padding: '8px 15px', cursor: 'pointer' }}>\n          Click Me\n        </button>\n        <div {...styling('myComponentToggleColor', clickCount)}>\n          Click Count: {clickCount}\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default MyComponent; // Export for use in a larger app","lang":"typescript","description":"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."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":"0.10.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":"0.10.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":"0.10.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"The `base16Theme` object passed to `getStylingFromBase16` or referenced within it is undefined or missing expected properties.","error":"TypeError: Cannot read properties of undefined (reading 'base00')"},{"fix":"Run `npm install react-base16-styling` or `yarn add react-base16-styling`. Verify the import statement exactly matches `import { ... } from 'react-base16-styling';`.","cause":"The package is not installed or the import path is incorrect.","error":"Module not found: Can't resolve 'react-base16-styling'"},{"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.","cause":"Styling functions are returning an incorrect format, or the `styling` utility is not correctly destructured and spread onto the element.","error":"Styling is not applied to my component."}],"ecosystem":"npm"}