{"library":"react-themeable","title":"React Themeable Utility","description":"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.","language":"javascript","status":"abandoned","last_verified":"Sun Apr 19","install":{"commands":["npm install react-themeable"],"cli":null},"imports":["import themeable from 'react-themeable';","const themeable = require('react-themeable');"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { Component } from 'react';\nimport themeable from 'react-themeable';\n\n// Example of a simple theme object (can be CSS Modules, Radium, etc.)\nconst myTheme = {\n  root: { backgroundColor: 'lightblue', padding: '10px' },\n  foo: { color: 'red', fontWeight: 'bold' },\n  bar: { fontSize: '1.2em' },\n  baz: { border: '1px solid gray', margin: '5px' }\n};\n\nclass MyThemedComponent extends Component {\n  render() {\n    // Initialize themeable with the theme prop provided to the component\n    const theme = themeable(this.props.theme);\n\n    return (\n      // Use the theme helper function to apply styles\n      // The first argument is a unique key (important for some styling libs like Radium)\n      // Subsequent arguments are style names defined in your theme\n      <div {...theme(1, 'root')}>\n        <div {...theme(2, 'foo', 'bar')}>Foo Bar</div>\n        <div {...theme(3, 'baz')}>Baz Content</div>\n      </div>\n    );\n  }\n}\n\n// To use MyThemedComponent with a theme:\nfunction App() {\n  return (\n    <div className=\"App\">\n      <h1>My Application</h1>\n      <MyThemedComponent theme={myTheme} />\n      {/* You could also pass a different theme or no theme */}\n      <MyThemedComponent theme={{ root: { backgroundColor: 'lightgreen' } }} />\n    </div>\n  );\n}\n\nexport default App;\n","lang":"javascript","description":"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}