Neolithic Programming Machine
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    react-custom-propertiespublic

    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

    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 <CustomProperties /> 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 (
          <div>
            <CustomProperties properties={{ '--branding-color': '#FF0000' }}>
              <div className="header">
                this will have the background color #FF0000
              </div>
            </CustomProperties>
          </div>
        );
      }
    }
    

    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 (
          <div>
            <CustomProperties properties={{ '--branding-color': '#FF0000' }}>
              <div className="header">
                this will have the background color #FF0000
              </div>
              
              <CustomProperties properties={{ '--branding-color': '#555555' }}>
                <div className="header">
                  this will have the background color #555555
                </div>
              </CustomProperties>
            </CustomProperties>
          </div>
        );
      }
    }
    

    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 (
          <div>
            <CustomProperties 
              global
              properties={{ '--branding-color': '#FF0000' }} 
            />
    
            <div className="header">
              this will have the background color #FF0000
            </div>
          </div>
        );
      }
    }
    

    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

    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

    install

    npm i react-custom-properties

    Downloadslast 7 days

    573

    version

    1.2.0

    license

    MIT

    repository

    github.com

    last publish

    collaborators

    • avatar