{"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.","language":"javascript","status":"abandoned","last_verified":"Sun Apr 19","install":{"commands":["npm install react-base16-styling"],"cli":null},"imports":["import { createStyling } from 'react-base16-styling';","import { getBase16Theme } from 'react-base16-styling';","import { invertBase16Theme } from 'react-base16-styling';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}