Permalink
Fetching contributors…
Cannot retrieve contributors at this time
98 lines (60 sloc) 2.23 KB

CSS Variables

Use CSS Custom Properties (aka CSS variables) theming with automatic fallback to regular theming. Below components allow you to safely use CSS variables. You simply use <CssVarsProvider> similar to how you use <Theme>, but if CSS variables are supported by user's browser, all values will be replaced by CSS variables and on subsequent re-renders it will try to just modify the CSS variables without re-rendering the children.

If CSS Custom Properties are not supported, CssVars works like a typical theme provider.

Usage

import {CssVarsProvider, CssVars} from 'libreact/lib/cssvars';

<CssVarsProvider vars={{
  color: 'tomato'
}}>
  <CssVars>{vars =>
    <button style={vars}>Click me!</button>
  }</CssVars>
</CssVarsProvider>

In the above example vars is replaced by something like

{
  color: '---libreact-color'
}

, where ---libreact-color is a CSS variable, which will be updated on theme changes, instead of re-rendering the children.

<CssVarsProvider>

CSS variable context provider.

Props

  • ns — optional, string, context namespace, defaults to empty string ''.
  • vars — required, plain flat JavaScript object, map of keys to CSS values, which will be replaces by CSS variables.

<CssVars>

CSS variable context consumer render prop.

Props

  • ns — optional, string, context namespace, defaults to ''.

Arguments

Render prop receives a single argument — map of variables where values are replaced by CSS variables.

withCssVars() HOC

Enhancer that injects vars prop into component.

Usage

import {withCssVars} from 'libreact/lib/cssvars';

const MyCompWithVars = withCssVars(MyComp);
const MyCompWithVars = withCssVars(MyComp, 'theme', {ns: 'css-theme'});

Signature

withCssVars(Component, propName?, cssVarsProps?);

@withCssVars Decorator

Stateful class decorator that injects vars prop.

Usage

import {withCssVars} from 'libreact/lib/cssvars';

@withCssVars
class MyCompWithVars extends Component {

}

@withCssVars('theme', {ns: 'css-theme'})
class MyCompWithVars extends Component {

}