React use CSS custom properties & Utilities ·

Get or set a css custom property value with a react hook

This is a React Hook which can get or set a CSS variable aka (Custom property).

Table of Contents generated with DocToc

• React use CSS custom properties & Utilities ·
  • Affiliate
  • 🎯 Objective
  • 🚀 Installation
  • Usage
    • API
      • Parameters
      • Return Values
  • Contribute and Commands
    • Jest
    • TypeScript
  • Continuous Integration
  • Contributors

Affiliate

If you like to support my OSS work you could "buy me a coffee" or want to take a look on tools I recommend you could checkout.

🎯 Objective

Sometimes you want to change or get a CSS custom property value inside you react application to use the value inside your js code. You may also want to set and overwrite a CSS custom property.

🚀 Installation

npm i react-use-css-custom-property --save or yarn add react-use-css-custom-property

Usage

You can import and use the hook like the following example

import 'react-app-polyfill/ie11';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import './index.css';
import useCSSCustomProperty from 'react-use-css-custom-property';

const App = () => {
  const [firstColor, setFirstColor] = useCSSCustomProperty('--first-color');
  const [secondColor, setSecondColor] = useCSSCustomProperty('--first-color');
  return (
    <div>
      <button onClick={() => setFirstColor('red')}>
        Set first color to red
      </button>
      <p id="firstParagraph">
        This paragraph should have a {firstColor.propertyValue} background and
        {secondColor.propertyValue}
      </p>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

and your index.css file

:root {
  --first-color: hotpink;
  --second-color: white;
}

#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

API

const [
  { propertyValue, propertyName, selectedElement, error, status },
  setCustomCSSProperty,
] = useCSSCustomProperty(propertyName, query);

Parameters

propertyName: string, query?: string

• propertyName: a string for the property name you want to get
• query: (optional) a query to get properties from specific HTMLElements default is :root

Return Values

• propertyValue: the current custom prop value

• propertyName: the current custom prop name

• selectedElement: if there's a request or revalidation loading

• error: A string which tells you what went wrong e.g. the CSS custom property does not exist

• status: can have the following three states 'INIT | 'OK' | 'ERROR'

• setCustomCSSProperty: function to mutate the custom property value

Contribute and Commands

The recommended workflow is to run TSDX in one terminal:

npm start # or yarn start

This builds to /dist and runs the project in watch mode so any edits you save inside src causes a rebuild to /dist.

Then run the example inside another:

cd example
npm i # or yarn to install dependencies
npm start # or yarn start

The default example imports and live reloads whatever is in /dist, so if you are seeing an out of date component, make sure TSDX is running in watch mode like we recommend above. No symlinking required, we use Parcel's aliasing.

To do a one-off build, use npm run build or yarn build.

To run tests, use npm test or yarn test.

Jest

Jest tests are set up to run with npm test or yarn test. This runs the test watcher (Jest) in an interactive mode. By default, runs tests related to files changed since the last commit.

TypeScript

tsconfig.json is set up to interpret dom and esnext types, as well as react for jsx. Adjust according to your needs.

Continuous Integration

Contributors

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!