mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2024-11-10 19:56:54 +03:00
32b87260cb
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> |
||
---|---|---|
.. | ||
src | ||
test | ||
.eslintignore | ||
.eslintrc.js | ||
babel.config.esm.json | ||
babel.config.json | ||
CHANGELOG.md | ||
jest.config.js | ||
LICENSE.md | ||
package.json | ||
README.md | ||
tsconfig.json | ||
tsconfig.test.json |
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
yarn add react-base16-styling
Usage
import { createStyling } from 'react-base16-styling';
import base16Themes from './base16Themes';
function getStylingFromBase16(base16Theme) {
return {
myComponent: {
backgroundColor: base16Theme.base00,
},
myComponentToggleColor({ style, className }, clickCount) {
return {
style: {
...style,
backgroundColor: clickCount % 2 ? 'red' : 'blue',
},
};
},
};
}
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')}>
<a onClick={() => this.setState({ clickCount: clickCount + 1 })}>
Click Me
</a>
<div {...styling('myComponentToggleColor', clickCount)}>
{clickCount}
</div>
</div>
);
}
}
createStyling
function(getStylingFromBase16, defaultStylingOptions, themeOrStyling)
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. Theme name can have a modifier: "themeName:inverted" to invert theme colors (see #invertTheme) |
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
function(themeOrStyling, base16Themes)
Helper method that returns base16
theme object if themeOrStyling
is base16
theme name or theme object.
invertBase16Theme
function(base16Theme)
Helper method that inverts base16
theme colors, creating light theme out of dark one or vice versa.
invertTheme
function(theme)
Helper method that inverts a theme or styling object to be passed into the themeOrStyling
parameter of createStyling.