react-base16-styling
React styling with base16 color scheme support
Inspired by react-themeable, this utility provides flexible theming for your component with base16 theme support.
Install
npm i -S react-base16-styling
Usage
import createStyling from 'react-base16-styling';import base16Themes from './base16Themes'; { return myComponent: backgroundColor: base16Themebase00 { return style: ...style backgroundColor: clickCount % 2 ? 'red' : 'blue' } ;} const createStylingFromTheme = ; state = clickCount: 0 { const theme invertTheme = thisprops; const clickCount = thisstate; const styling = ; return <div > <a =>Click Me</a> <div > clickCount </div> </div> }
createStyling
Argument | Signature | Description |
---|---|---|
getStylingFromBase16 |
function(base16Theme) |
creates object with default stylings for your component, using provided base16 theme. |
defaultStylingOptions |
{ defaultBase16, base16Themes } |
optional parameters, allow to set default base16 theme and additional base16 themes for component |
themeOrStyling |
string or object |
base16 theme name, base16 theme object or styling object |
invertTheme |
boolean |
if true , theme colors are inverted, creating light version of the theme |
Styling object values could be: - objects (treated as style definitions) - strings (class names) - functions (they may be provided with additional parameters and should return object { style, className })
getBase16Theme
Helper method that returns base16
theme object if themeOrStyling
is base16
theme name or theme object.