Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

use-state-in-custom-properties

Package Overview
Dependencies
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

use-state-in-custom-properties - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

src/index.js

49

index.js

@@ -6,11 +6,44 @@ "use strict";

});
Object.defineProperty(exports, "useStateInCustomProperties", {
enumerable: true,
get: function get() {
return _useStateInCustomProperties["default"];
}
});
exports["default"] = void 0;
var _useStateInCustomProperties = _interopRequireDefault(require("./useStateInCustomProperties"));
var _react = _interopRequireDefault(require("react"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
var useStateInCustomProperties = function useStateInCustomProperties(className, propertiesObject) {
return function (_ref) {
var children = _ref.children;
var customPropertyStyles = Object.entries(propertiesObject).reduce(function (acc, _ref2) {
var _ref3 = _slicedToArray(_ref2, 2),
key = _ref3[0],
value = _ref3[1];
return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, "--".concat(key), value));
}, {});
return /*#__PURE__*/_react["default"].createElement("div", {
className: className,
style: customPropertyStyles
}, children);
};
};
var _default = useStateInCustomProperties;
exports["default"] = _default;

44

package.json
{
"name": "use-state-in-custom-properties",
"version": "1.0.2",
"description": "Pass your data through as custom properties to your CSS",
"author": {
"name": "Andrew Bloyce",
"email": "bloyce1990@gmail.com"
},
"keywords": [
"react",
"hooks",
"react-hooks"
],
"version": "1.0.3",
"description": "Makes your react state accessible through CSS properties.",
"main": "index.js",
"scripts": {
"build": "babel src --out-dir .",
"bump": "npm version",
"example": "cd example && yarn install && yarn package",
"prepublishOnly": "yarn build",
"watch": "nodemon --watch src --exec \"yarn build\""
"test": "echo \"Error: no test specified\" && exit 1",
"build": "./node_modules/.bin/babel src --out-file index.js"
},
"author": "Andrew Bloyce",
"license": "MIT",
"devDependencies": {
"@babel/cli": "^7.12.10",
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.10",
"@babel/preset-react": "^7.12.10",
"nodemon": "^2.0.6"
"peerDependencies": {
"react": "^16.13.1"
},

@@ -34,5 +19,14 @@ "repository": {

},
"bugs": {
"url": "https://github.com/bloycey/use-state-in-custom-properties/issues"
}
"devDependencies": {
"@babel/cli": "^7.10.5",
"@babel/core": "^7.11.1",
"@babel/preset-env": "^7.11.0",
"@babel/preset-react": "^7.10.4",
"react": "^16.13.1"
},
"keywords": [
"CSS",
"Custom Properties",
"React"
]
}

@@ -1,7 +0,1 @@

# Use state in CSS custom properties.
Inspired by this article by Chris Coyier I made this utility that injects that state you select into CSS custom properties scoped to the component.
## Usage
Coming soon!
# Soon

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc