Registry / web-framework / react-themeable

react-themeable

library1.1.0jsnpmunverified

react-themeable is a utility library designed to simplify the process of making React components easily themeable across various styling approaches. Released as 'experimental' with its latest version 1.1.0, it aims to provide a unified API for integrating with CSS Modules, Radium, Aphrodite, React Style, JSS, global CSS, and inline styles. The library exposes a single `themeable` function that takes a theme prop and returns a helper function to apply styles based on a key and style names. Its key differentiator was its broad compatibility with many competing React styling solutions at the time of its release. However, the package was last published over 10 years ago (as of April 2026), indicating it is no longer actively maintained. Its peer dependency on React is for very old versions, making it incompatible with modern React applications.

web-framework

npm install react-themeable

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-THEMEABLE

react-themeable

web-frameworkjavascriptv1.1.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

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 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

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

themeable

✓ import themeable from 'react-themeable';

✗ import { themeable } from 'react-themeable';

The library exports a single default function.

themeable (CommonJS)

✓ const themeable = require('react-themeable');

For CommonJS environments, the default export is directly assigned.

This quickstart demonstrates how to integrate the `themeable` function within a React class component's render method to dynamically apply styles from a theme object passed via props, supporting multiple style definitions per element.

import React, { Component } from 'react'; import themeable from 'react-themeable'; // Example of a simple theme object (can be CSS Modules, Radium, etc.) const myTheme = { root: { backgroundColor: 'lightblue', padding: '10px' }, foo: { color: 'red', fontWeight: 'bold' }, bar: { fontSize: '1.2em' }, baz: { border: '1px solid gray', margin: '5px' } }; class MyThemedComponent extends Component { render() { // Initialize themeable with the theme prop provided to the component const theme = themeable(this.props.theme); return ( // Use the theme helper function to apply styles // The first argument is a unique key (important for some styling libs like Radium) // Subsequent arguments are style names defined in your theme <div {...theme(1, 'root')}> <div {...theme(2, 'foo', 'bar')}>Foo Bar</div> <div {...theme(3, 'baz')}>Baz Content</div> </div> ); } } // To use MyThemedComponent with a theme: function App() { return ( <div className="App"> <h1>My Application</h1> <MyThemedComponent theme={myTheme} /> {/* You could also pass a different theme or no theme */} <MyThemedComponent theme={{ root: { backgroundColor: 'lightgreen' } }} /> </div> ); } export default App;

Debug

Known issues

breakingThe package is abandoned and has not been updated in over 10 years. Its peer dependencies are for very old React versions (e.g., ^0.14.0 || ^15.0.0 || ^16.0.0), making it largely incompatible with modern React (v17+).

fix

Avoid using this library in new projects. For existing projects, consider migrating to actively maintained theming solutions like Styled Components, Emotion, or CSS-in-JS libraries that offer better React compatibility and features.

affects: >=1.1.0

gotchaThe README explicitly states that a unique key for each themed element is required when using Radium for correct functionality. Forgetting this can lead to styling issues with Radium.

fix

Ensure the first argument to the `theme` helper function is a unique identifier (e.g., a number or string unique within its sibling elements) if Radium is part of your styling stack. Example: `<div {...theme(1, 'root')} />`

affects: >=1.0.0

deprecatedThe library itself was marked as 'experimental' in its README, a status that was never updated. This indicates it was not considered stable even during its active development phase, which ended long ago.

fix

This is a fundamental aspect of the library's history and cannot be 'fixed.' Users should be aware of its experimental and unmaintained nature.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'createElement') or similar errors related to React internals

The `react-themeable` library has an outdated `peerDependencies` range for `react`, making it incompatible with modern React versions (17+). When installed in a project using a newer React version, it may lead to runtime errors due to mismatched React contexts or APIs.

fix

This library is abandoned and not compatible with current React versions. It is strongly recommended to replace `react-themeable` with an actively maintained theming solution that supports modern React, such as Context API-based solutions, Styled Components, Emotion, or Material-UI's theming.

TypeError: themeable is not a function

This error typically occurs if `react-themeable` is imported incorrectly. `react-themeable` exports a single default function, not named exports.

fix

Use a default import: `import themeable from 'react-themeable';`. Avoid named imports like `import { themeable } from 'react-themeable';`

Upgrade

Version history

1.1.0latest on npm

Audit

Dependencies

reactrequiredPeer dependency, but specifies very old versions (^0.14.0 || ^15.0.0 || ^16.0.0). This makes it incompatible with modern React versions (17+).

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/markdalgleish/react-themeable ↗

packagehttps://www.npmjs.com/package/react-themeable ↗