{"id":24224448,"url":"https://github.com/danbahrami/react-custom-properties","last_synced_at":"2025-09-22T15:30:35.967Z","repository":{"id":57132785,"uuid":"86217875","full_name":"danbahrami/react-custom-properties","owner":"danbahrami","description":"A React component for applying CSS Variables (Custom Properties)","archived":false,"fork":false,"pushed_at":"2018-01-26T15:32:27.000Z","size":30,"stargazers_count":58,"open_issues_count":6,"forks_count":10,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-03T14:42:48.036Z","etag":null,"topics":["css-custom-properties","css-variables","react"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/danbahrami.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-26T08:19:28.000Z","updated_at":"2024-02-08T19:45:08.000Z","dependencies_parsed_at":"2022-08-24T07:01:02.585Z","dependency_job_id":null,"html_url":"https://github.com/danbahrami/react-custom-properties","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danbahrami%2Freact-custom-properties","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danbahrami%2Freact-custom-properties/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danbahrami%2Freact-custom-properties/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danbahrami%2Freact-custom-properties/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danbahrami","download_url":"https://codeload.github.com/danbahrami/react-custom-properties/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":233856656,"owners_count":18740989,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css-custom-properties","css-variables","react"],"created_at":"2025-01-14T07:17:26.826Z","updated_at":"2025-09-22T15:30:30.696Z","avatar_url":"https://github.com/danbahrami.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Custom Properties\n\nA 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)\n\n## Install\n\nTo get started install via npm\n\n```\nnpm install react-custom-properties\n```\n\nYou can then import the component into your code using ES5 require\n```\nvar CustomProperties = require('react-custom-properties');\n```\n\nor ES6 imports\n```\nimport CustomProperties from 'react-custom-properties';\n```\n\n### Usage\n  \nThis module provides a `\u003cCustomProperties /\u003e` component. When mounted it will, by default, apply any CSS variables\npassed to the `properties` component to its children.\n\nSo for example, your stylesheet may contain CSS Variables like this.\n```\n.header {\n  background: var(--branding-color);\n}\n```\n\nAnd you can apply values to those variables like this.\n```\nimport React, { Component } from 'react';\nimport CustomProperties from 'react-custom-properties';\n\nclass App extends Component {\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cCustomProperties properties={{ '--branding-color': '#FF0000' }}\u003e\n          \u003cdiv className=\"header\"\u003e\n            this will have the background color #FF0000\n          \u003c/div\u003e\n        \u003c/CustomProperties\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n### Nesting\n\nThe `CustomProperties` component can be nested so that properties set by parent instances are overridden by ones set by child instances. So for example...\n\n*Using the same stylesheet as before*\n\n```\nimport React, { Component } from 'react';\nimport CustomProperties from 'react-custom-properties';\n\nclass App extends Component {\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cCustomProperties properties={{ '--branding-color': '#FF0000' }}\u003e\n          \u003cdiv className=\"header\"\u003e\n            this will have the background color #FF0000\n          \u003c/div\u003e\n          \n          \u003cCustomProperties properties={{ '--branding-color': '#555555' }}\u003e\n            \u003cdiv className=\"header\"\u003e\n              this will have the background color #555555\n            \u003c/div\u003e\n          \u003c/CustomProperties\u003e\n        \u003c/CustomProperties\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n### Global\n\nThe `CustomProperties` component accepts a boolean `global` prop. By default the CSS Variables will only apply to the\ncomponent's children. When the `global` prop is passed the CSS Variables will be set on the document root and will\ntherefor be globally applied to all styles.\n\n*Using the same stylesheet as before*\n\n```\nimport React, { Component } from 'react';\nimport CustomProperties from 'react-custom-properties';\n\nclass App extends Component {\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cCustomProperties \n          global\n          properties={{ '--branding-color': '#FF0000' }} \n        /\u003e\n\n        \u003cdiv className=\"header\"\u003e\n          this will have the background color #FF0000\n        \u003c/div\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n*Any properties set by a non-global instance will take precedence over properties set by a global instance*\n\n## Credit\n\n- The idea for this component came from working with @carlmw and @Kliriklara\n- This repo was bootstrapped from [npm-react-boilerplate](https://github.com/juliancwirko/react-npm-boilerplate)\n\n## Contribute\n\n1. Fork this repo\n2. Create your feature branch (`git checkout -b my-new-feature`)\n3. Make sure the tests pass (`npm run test`)\n4. Commit your changes (`git commit -am 'Add some feature'`)\n5. Push to the branch (`git push origin my-new-feature`)\n6. Create new Pull Request\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanbahrami%2Freact-custom-properties","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanbahrami%2Freact-custom-properties","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanbahrami%2Freact-custom-properties/lists"}