Registry / serialization / react-base16-styling

react-base16-styling

JSON →
library0.10.0jsnpmunverified

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.

npm install react-base16-styling
INSTALL
IMPORT
SIG · REACT-BASE16-STYLI
R
react-base16-styling
serializationjavascriptv0.10.0
Install
Import
Disk
Pass rate
0/ 6
Env Coverage0 / 6
glibc
1822
musl
1822
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18226 runs
build_error
glibc
node 18226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

createStyling
import { createStyling } from 'react-base16-styling';
const createStyling = require('react-base16-styling').createStyling;
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
import { getBase16Theme } from 'react-base16-styling';
import getBase16Theme from 'react-base16-styling/lib/getBase16Theme';
All helper utilities are named exports from the main package entry point.
invertBase16Theme
import { invertBase16Theme } from 'react-base16-styling';
const { invertBase16Theme } = require('react-base16-styling');
A named import is the standard way to access this helper function.

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
Debug
Known issues
breakingThe 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.
affects: 0.10.0
gotchaThis 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.
affects: 0.10.0
gotchaDue 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.
affects: 0.10.0
Errors
Common errors & fixes
TypeError: Cannot read properties of undefined (reading 'base00')
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'
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.
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.
Upgrade
Version history
0.10.0latest on npm
Audit
Dependencies

No dependency data recorded yet.

Agent activity
4 hits · last 30 days
node
4
Resources
react-base16-styling — npm install react-base16-styling · libregistry