react-css-variables

npm install --save react-css-variables

A React HOC for CSS variables

Provides a HOC to create a component with props mapped to CSS variables. It allows to update CSS of underlying components without any DOM operation.

The HOC won't trigger a render if only one of the variables is changed. This can be a huge performance improvement if you have a component with a deep render tree, since instead of passing props in elements as inline styles, you can only set variables, and no render will be triggered.

Usage

import styled from 'styled-components'
import variables from 'react-css-variables'
 
// We use styled-components, but it's totally up to you, as long as the css uses variables.
const Title = styled.h1`
  color: var(--color);
  background: var(--background);
`
 
// Wrap our component with provided HOC.
const VariablesTitle = variables('color', 'background')(Title)
 
// Changing "color" or "background" will not trigger a render.
const Demo = () => (
  <VariablesTitle color='red' background='blue'>
    Hello world
  </VariablesTitle>
)