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.

Buy me a coffee My personal patreon

Sizzy A super useful App when developing for different screens

🎯 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

``js
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 (


ReactDOM.render(, document.getElementById('root'));
`

and your index.css file

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

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

$3

`js
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:

`bash
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:

`bash
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.

$3

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.

$3

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):

Jacob Cofman 💻

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