https://github.com/jide/react-css-variables

A React component to set CSS variables.
https://github.com/jide/react-css-variables

Last synced: 2 months ago
JSON representation

A React component to set CSS variables.

• Host: GitHub
• URL: https://github.com/jide/react-css-variables
• Owner: jide
• Created: 2016-12-26T03:06:57.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2021-04-03T04:30:56.000Z (over 3 years ago)
• Last Synced: 2024-09-30T14:04:18.498Z (2 months ago)
• Language: JavaScript
• Homepage:
• Size: 14.6 KB
• Stars: 91
• Watchers: 7
• Forks: 5
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md

Awesome Lists containing this project

README

        
# react-css-variables

[![npm package][npm-badge]][npm]

[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square

[npm]: https://www.npmjs.org/package/npm-package

```

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

```jsx

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 = () => (

  

    Hello world

  

)

```