
Product
Unify Your Security Stack with Socket Basics
A single platform for static analysis, secrets detection, container scanning, and CVE checks—built on trusted open source tools, ready to run out of the box.
@sishuguojixuefu/react-base16-styling
Advanced tools
React styling with base16 color scheme support
Inspired by react-themeable, this utility provides flexible theming for your component with base16 theme support.
npm i -S react-base16-styling
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, invertTheme } = this.props;
const { clickCount } = this.state;
const styling = createStylingFromTheme(theme, invertTheme);
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, isLightTheme)
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
function(themeOrStyling, base16Themes)
Helper method that returns base16
theme object if themeOrStyling
is base16
theme name or theme object.
FAQs
React styling with base16 color scheme support
We found that @sishuguojixuefu/react-base16-styling demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
A single platform for static analysis, secrets detection, container scanning, and CVE checks—built on trusted open source tools, ready to run out of the box.
Product
Socket is launching experimental protection for the Hugging Face ecosystem, scanning for malware and malicious payload injections inside model files to prevent silent AI supply chain attacks.
Research
/Security News
The Socket Threat Research Team uncovered a coordinated campaign that floods the Chrome Web Store with 131 rebranded clones of a WhatsApp Web automation extension to spam Brazilian users.