https://github.com/danbahrami/react-custom-properties
A React component for applying CSS Variables (Custom Properties)
https://github.com/danbahrami/react-custom-properties
css-custom-properties css-variables react
Last synced: 6 months ago
JSON representation
A React component for applying CSS Variables (Custom Properties)
- Host: GitHub
- URL: https://github.com/danbahrami/react-custom-properties
- Owner: danbahrami
- License: mit
- Created: 2017-03-26T08:19:28.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2018-01-26T15:32:27.000Z (about 8 years ago)
- Last Synced: 2025-01-03T14:42:48.036Z (about 1 year ago)
- Topics: css-custom-properties, css-variables, react
- Language: JavaScript
- Size: 29.3 KB
- Stars: 58
- Watchers: 2
- Forks: 10
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Custom Properties
A React component for declaratively applying CSS Variables or CSS Custom Properties as the are officially known. For CSS variable usage see [https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables)
## Install
To get started install via npm
```
npm install react-custom-properties
```
You can then import the component into your code using ES5 require
```
var CustomProperties = require('react-custom-properties');
```
or ES6 imports
```
import CustomProperties from 'react-custom-properties';
```
### Usage
This module provides a `` component. When mounted it will, by default, apply any CSS variables
passed to the `properties` component to its children.
So for example, your stylesheet may contain CSS Variables like this.
```
.header {
background: var(--branding-color);
}
```
And you can apply values to those variables like this.
```
import React, { Component } from 'react';
import CustomProperties from 'react-custom-properties';
class App extends Component {
render() {
return (
this will have the background color #FF0000
);
}
}
```
### Nesting
The `CustomProperties` component can be nested so that properties set by parent instances are overridden by ones set by child instances. So for example...
*Using the same stylesheet as before*
```
import React, { Component } from 'react';
import CustomProperties from 'react-custom-properties';
class App extends Component {
render() {
return (
this will have the background color #FF0000
this will have the background color #555555
);
}
}
```
### Global
The `CustomProperties` component accepts a boolean `global` prop. By default the CSS Variables will only apply to the
component's children. When the `global` prop is passed the CSS Variables will be set on the document root and will
therefor be globally applied to all styles.
*Using the same stylesheet as before*
```
import React, { Component } from 'react';
import CustomProperties from 'react-custom-properties';
class App extends Component {
render() {
return (
this will have the background color #FF0000
);
}
}
```
*Any properties set by a non-global instance will take precedence over properties set by a global instance*
## Credit
- The idea for this component came from working with @carlmw and @Kliriklara
- This repo was bootstrapped from [npm-react-boilerplate](https://github.com/juliancwirko/react-npm-boilerplate)
## Contribute
1. Fork this repo
2. Create your feature branch (`git checkout -b my-new-feature`)
3. Make sure the tests pass (`npm run test`)
4. Commit your changes (`git commit -am 'Add some feature'`)
5. Push to the branch (`git push origin my-new-feature`)
6. Create new Pull Request
## License
MIT