Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-likert-scale
Advanced tools
react-likert-scale - npm Package Compare versions
Comparing version 3.0.0 to 3.0.1
@@ -9,2 +9,13 @@ Changelog | ||
| [3.0.1] - 2021-01-16 | ||
| ---------------------------- | ||
| ### Changes | ||
| * The code is now minified. | ||
| * The two dependencies have been removed. | ||
| * The license has been switch to Creative Commons 0. You can use this sofware anywhere. | ||
| [3.0.0] - 2021-01-15 | ||
@@ -17,2 +28,3 @@ ---------------------------- | ||
| Class component. | ||
| ### Breaking Changes | ||
@@ -19,0 +31,0 @@ |
@@ -1,522 +0,1 @@ | ||
| import React from 'react'; | ||
| 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 _extends() { | ||
| _extends = Object.assign || function (target) { | ||
| for (var i = 1; i < arguments.length; i++) { | ||
| var source = arguments[i]; | ||
| for (var key in source) { | ||
| if (Object.prototype.hasOwnProperty.call(source, key)) { | ||
| target[key] = source[key]; | ||
| } | ||
| } | ||
| } | ||
| return target; | ||
| }; | ||
| return _extends.apply(this, arguments); | ||
| } | ||
| function createCommonjsModule(fn) { | ||
| var module = { exports: {} }; | ||
| return fn(module, module.exports), module.exports; | ||
| } | ||
| /*! | ||
| Copyright (c) 2017 Jed Watson. | ||
| Licensed under the MIT License (MIT), see | ||
| http://jedwatson.github.io/classnames | ||
| */ | ||
| var classnames = createCommonjsModule(function (module) { | ||
| /* global define */ | ||
| (function () { | ||
| var hasOwn = {}.hasOwnProperty; | ||
| function classNames () { | ||
| var classes = []; | ||
| for (var i = 0; i < arguments.length; i++) { | ||
| var arg = arguments[i]; | ||
| if (!arg) continue; | ||
| var argType = typeof arg; | ||
| if (argType === 'string' || argType === 'number') { | ||
| classes.push(arg); | ||
| } else if (Array.isArray(arg) && arg.length) { | ||
| var inner = classNames.apply(null, arg); | ||
| if (inner) { | ||
| classes.push(inner); | ||
| } | ||
| } else if (argType === 'object') { | ||
| for (var key in arg) { | ||
| if (hasOwn.call(arg, key) && arg[key]) { | ||
| classes.push(key); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| return classes.join(' '); | ||
| } | ||
| if ( module.exports) { | ||
| classNames.default = classNames; | ||
| module.exports = classNames; | ||
| } else { | ||
| window.classNames = classNames; | ||
| } | ||
| }()); | ||
| }); | ||
| var crypt = createCommonjsModule(function (module) { | ||
| (function() { | ||
| var base64map | ||
| = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/', | ||
| crypt = { | ||
| // Bit-wise rotation left | ||
| rotl: function(n, b) { | ||
| return (n << b) | (n >>> (32 - b)); | ||
| }, | ||
| // Bit-wise rotation right | ||
| rotr: function(n, b) { | ||
| return (n << (32 - b)) | (n >>> b); | ||
| }, | ||
| // Swap big-endian to little-endian and vice versa | ||
| endian: function(n) { | ||
| // If number given, swap endian | ||
| if (n.constructor == Number) { | ||
| return crypt.rotl(n, 8) & 0x00FF00FF | crypt.rotl(n, 24) & 0xFF00FF00; | ||
| } | ||
| // Else, assume array and swap all items | ||
| for (var i = 0; i < n.length; i++) | ||
| n[i] = crypt.endian(n[i]); | ||
| return n; | ||
| }, | ||
| // Generate an array of any length of random bytes | ||
| randomBytes: function(n) { | ||
| for (var bytes = []; n > 0; n--) | ||
| bytes.push(Math.floor(Math.random() * 256)); | ||
| return bytes; | ||
| }, | ||
| // Convert a byte array to big-endian 32-bit words | ||
| bytesToWords: function(bytes) { | ||
| for (var words = [], i = 0, b = 0; i < bytes.length; i++, b += 8) | ||
| words[b >>> 5] |= bytes[i] << (24 - b % 32); | ||
| return words; | ||
| }, | ||
| // Convert big-endian 32-bit words to a byte array | ||
| wordsToBytes: function(words) { | ||
| for (var bytes = [], b = 0; b < words.length * 32; b += 8) | ||
| bytes.push((words[b >>> 5] >>> (24 - b % 32)) & 0xFF); | ||
| return bytes; | ||
| }, | ||
| // Convert a byte array to a hex string | ||
| bytesToHex: function(bytes) { | ||
| for (var hex = [], i = 0; i < bytes.length; i++) { | ||
| hex.push((bytes[i] >>> 4).toString(16)); | ||
| hex.push((bytes[i] & 0xF).toString(16)); | ||
| } | ||
| return hex.join(''); | ||
| }, | ||
| // Convert a hex string to a byte array | ||
| hexToBytes: function(hex) { | ||
| for (var bytes = [], c = 0; c < hex.length; c += 2) | ||
| bytes.push(parseInt(hex.substr(c, 2), 16)); | ||
| return bytes; | ||
| }, | ||
| // Convert a byte array to a base-64 string | ||
| bytesToBase64: function(bytes) { | ||
| for (var base64 = [], i = 0; i < bytes.length; i += 3) { | ||
| var triplet = (bytes[i] << 16) | (bytes[i + 1] << 8) | bytes[i + 2]; | ||
| for (var j = 0; j < 4; j++) | ||
| if (i * 8 + j * 6 <= bytes.length * 8) | ||
| base64.push(base64map.charAt((triplet >>> 6 * (3 - j)) & 0x3F)); | ||
| else | ||
| base64.push('='); | ||
| } | ||
| return base64.join(''); | ||
| }, | ||
| // Convert a base-64 string to a byte array | ||
| base64ToBytes: function(base64) { | ||
| // Remove non-base-64 characters | ||
| base64 = base64.replace(/[^A-Z0-9+\/]/ig, ''); | ||
| for (var bytes = [], i = 0, imod4 = 0; i < base64.length; | ||
| imod4 = ++i % 4) { | ||
| if (imod4 == 0) continue; | ||
| bytes.push(((base64map.indexOf(base64.charAt(i - 1)) | ||
| & (Math.pow(2, -2 * imod4 + 8) - 1)) << (imod4 * 2)) | ||
| | (base64map.indexOf(base64.charAt(i)) >>> (6 - imod4 * 2))); | ||
| } | ||
| return bytes; | ||
| } | ||
| }; | ||
| module.exports = crypt; | ||
| })(); | ||
| }); | ||
| var charenc = { | ||
| // UTF-8 encoding | ||
| utf8: { | ||
| // Convert a string to a byte array | ||
| stringToBytes: function(str) { | ||
| return charenc.bin.stringToBytes(unescape(encodeURIComponent(str))); | ||
| }, | ||
| // Convert a byte array to a string | ||
| bytesToString: function(bytes) { | ||
| return decodeURIComponent(escape(charenc.bin.bytesToString(bytes))); | ||
| } | ||
| }, | ||
| // Binary encoding | ||
| bin: { | ||
| // Convert a string to a byte array | ||
| stringToBytes: function(str) { | ||
| for (var bytes = [], i = 0; i < str.length; i++) | ||
| bytes.push(str.charCodeAt(i) & 0xFF); | ||
| return bytes; | ||
| }, | ||
| // Convert a byte array to a string | ||
| bytesToString: function(bytes) { | ||
| for (var str = [], i = 0; i < bytes.length; i++) | ||
| str.push(String.fromCharCode(bytes[i])); | ||
| return str.join(''); | ||
| } | ||
| } | ||
| }; | ||
| var charenc_1 = charenc; | ||
| /*! | ||
| * Determine if an object is a Buffer | ||
| * | ||
| * @author Feross Aboukhadijeh <https://feross.org> | ||
| * @license MIT | ||
| */ | ||
| // The _isBuffer check is for Safari 5-7 support, because it's missing | ||
| // Object.prototype.constructor. Remove this eventually | ||
| var isBuffer_1 = function (obj) { | ||
| return obj != null && (isBuffer(obj) || isSlowBuffer(obj) || !!obj._isBuffer) | ||
| }; | ||
| function isBuffer (obj) { | ||
| return !!obj.constructor && typeof obj.constructor.isBuffer === 'function' && obj.constructor.isBuffer(obj) | ||
| } | ||
| // For Node v0.10 support. Remove this eventually. | ||
| function isSlowBuffer (obj) { | ||
| return typeof obj.readFloatLE === 'function' && typeof obj.slice === 'function' && isBuffer(obj.slice(0, 0)) | ||
| } | ||
| var md5 = createCommonjsModule(function (module) { | ||
| (function(){ | ||
| var crypt$1 = crypt, | ||
| utf8 = charenc_1.utf8, | ||
| isBuffer = isBuffer_1, | ||
| bin = charenc_1.bin, | ||
| // The core | ||
| md5 = function (message, options) { | ||
| // Convert to byte array | ||
| if (message.constructor == String) | ||
| if (options && options.encoding === 'binary') | ||
| message = bin.stringToBytes(message); | ||
| else | ||
| message = utf8.stringToBytes(message); | ||
| else if (isBuffer(message)) | ||
| message = Array.prototype.slice.call(message, 0); | ||
| else if (!Array.isArray(message) && message.constructor !== Uint8Array) | ||
| message = message.toString(); | ||
| // else, assume byte array already | ||
| var m = crypt$1.bytesToWords(message), | ||
| l = message.length * 8, | ||
| a = 1732584193, | ||
| b = -271733879, | ||
| c = -1732584194, | ||
| d = 271733878; | ||
| // Swap endian | ||
| for (var i = 0; i < m.length; i++) { | ||
| m[i] = ((m[i] << 8) | (m[i] >>> 24)) & 0x00FF00FF | | ||
| ((m[i] << 24) | (m[i] >>> 8)) & 0xFF00FF00; | ||
| } | ||
| // Padding | ||
| m[l >>> 5] |= 0x80 << (l % 32); | ||
| m[(((l + 64) >>> 9) << 4) + 14] = l; | ||
| // Method shortcuts | ||
| var FF = md5._ff, | ||
| GG = md5._gg, | ||
| HH = md5._hh, | ||
| II = md5._ii; | ||
| for (var i = 0; i < m.length; i += 16) { | ||
| var aa = a, | ||
| bb = b, | ||
| cc = c, | ||
| dd = d; | ||
| a = FF(a, b, c, d, m[i+ 0], 7, -680876936); | ||
| d = FF(d, a, b, c, m[i+ 1], 12, -389564586); | ||
| c = FF(c, d, a, b, m[i+ 2], 17, 606105819); | ||
| b = FF(b, c, d, a, m[i+ 3], 22, -1044525330); | ||
| a = FF(a, b, c, d, m[i+ 4], 7, -176418897); | ||
| d = FF(d, a, b, c, m[i+ 5], 12, 1200080426); | ||
| c = FF(c, d, a, b, m[i+ 6], 17, -1473231341); | ||
| b = FF(b, c, d, a, m[i+ 7], 22, -45705983); | ||
| a = FF(a, b, c, d, m[i+ 8], 7, 1770035416); | ||
| d = FF(d, a, b, c, m[i+ 9], 12, -1958414417); | ||
| c = FF(c, d, a, b, m[i+10], 17, -42063); | ||
| b = FF(b, c, d, a, m[i+11], 22, -1990404162); | ||
| a = FF(a, b, c, d, m[i+12], 7, 1804603682); | ||
| d = FF(d, a, b, c, m[i+13], 12, -40341101); | ||
| c = FF(c, d, a, b, m[i+14], 17, -1502002290); | ||
| b = FF(b, c, d, a, m[i+15], 22, 1236535329); | ||
| a = GG(a, b, c, d, m[i+ 1], 5, -165796510); | ||
| d = GG(d, a, b, c, m[i+ 6], 9, -1069501632); | ||
| c = GG(c, d, a, b, m[i+11], 14, 643717713); | ||
| b = GG(b, c, d, a, m[i+ 0], 20, -373897302); | ||
| a = GG(a, b, c, d, m[i+ 5], 5, -701558691); | ||
| d = GG(d, a, b, c, m[i+10], 9, 38016083); | ||
| c = GG(c, d, a, b, m[i+15], 14, -660478335); | ||
| b = GG(b, c, d, a, m[i+ 4], 20, -405537848); | ||
| a = GG(a, b, c, d, m[i+ 9], 5, 568446438); | ||
| d = GG(d, a, b, c, m[i+14], 9, -1019803690); | ||
| c = GG(c, d, a, b, m[i+ 3], 14, -187363961); | ||
| b = GG(b, c, d, a, m[i+ 8], 20, 1163531501); | ||
| a = GG(a, b, c, d, m[i+13], 5, -1444681467); | ||
| d = GG(d, a, b, c, m[i+ 2], 9, -51403784); | ||
| c = GG(c, d, a, b, m[i+ 7], 14, 1735328473); | ||
| b = GG(b, c, d, a, m[i+12], 20, -1926607734); | ||
| a = HH(a, b, c, d, m[i+ 5], 4, -378558); | ||
| d = HH(d, a, b, c, m[i+ 8], 11, -2022574463); | ||
| c = HH(c, d, a, b, m[i+11], 16, 1839030562); | ||
| b = HH(b, c, d, a, m[i+14], 23, -35309556); | ||
| a = HH(a, b, c, d, m[i+ 1], 4, -1530992060); | ||
| d = HH(d, a, b, c, m[i+ 4], 11, 1272893353); | ||
| c = HH(c, d, a, b, m[i+ 7], 16, -155497632); | ||
| b = HH(b, c, d, a, m[i+10], 23, -1094730640); | ||
| a = HH(a, b, c, d, m[i+13], 4, 681279174); | ||
| d = HH(d, a, b, c, m[i+ 0], 11, -358537222); | ||
| c = HH(c, d, a, b, m[i+ 3], 16, -722521979); | ||
| b = HH(b, c, d, a, m[i+ 6], 23, 76029189); | ||
| a = HH(a, b, c, d, m[i+ 9], 4, -640364487); | ||
| d = HH(d, a, b, c, m[i+12], 11, -421815835); | ||
| c = HH(c, d, a, b, m[i+15], 16, 530742520); | ||
| b = HH(b, c, d, a, m[i+ 2], 23, -995338651); | ||
| a = II(a, b, c, d, m[i+ 0], 6, -198630844); | ||
| d = II(d, a, b, c, m[i+ 7], 10, 1126891415); | ||
| c = II(c, d, a, b, m[i+14], 15, -1416354905); | ||
| b = II(b, c, d, a, m[i+ 5], 21, -57434055); | ||
| a = II(a, b, c, d, m[i+12], 6, 1700485571); | ||
| d = II(d, a, b, c, m[i+ 3], 10, -1894986606); | ||
| c = II(c, d, a, b, m[i+10], 15, -1051523); | ||
| b = II(b, c, d, a, m[i+ 1], 21, -2054922799); | ||
| a = II(a, b, c, d, m[i+ 8], 6, 1873313359); | ||
| d = II(d, a, b, c, m[i+15], 10, -30611744); | ||
| c = II(c, d, a, b, m[i+ 6], 15, -1560198380); | ||
| b = II(b, c, d, a, m[i+13], 21, 1309151649); | ||
| a = II(a, b, c, d, m[i+ 4], 6, -145523070); | ||
| d = II(d, a, b, c, m[i+11], 10, -1120210379); | ||
| c = II(c, d, a, b, m[i+ 2], 15, 718787259); | ||
| b = II(b, c, d, a, m[i+ 9], 21, -343485551); | ||
| a = (a + aa) >>> 0; | ||
| b = (b + bb) >>> 0; | ||
| c = (c + cc) >>> 0; | ||
| d = (d + dd) >>> 0; | ||
| } | ||
| return crypt$1.endian([a, b, c, d]); | ||
| }; | ||
| // Auxiliary functions | ||
| md5._ff = function (a, b, c, d, x, s, t) { | ||
| var n = a + (b & c | ~b & d) + (x >>> 0) + t; | ||
| return ((n << s) | (n >>> (32 - s))) + b; | ||
| }; | ||
| md5._gg = function (a, b, c, d, x, s, t) { | ||
| var n = a + (b & d | c & ~d) + (x >>> 0) + t; | ||
| return ((n << s) | (n >>> (32 - s))) + b; | ||
| }; | ||
| md5._hh = function (a, b, c, d, x, s, t) { | ||
| var n = a + (b ^ c ^ d) + (x >>> 0) + t; | ||
| return ((n << s) | (n >>> (32 - s))) + b; | ||
| }; | ||
| md5._ii = function (a, b, c, d, x, s, t) { | ||
| var n = a + (c ^ (b | ~d)) + (x >>> 0) + t; | ||
| return ((n << s) | (n >>> (32 - s))) + b; | ||
| }; | ||
| // Package private blocksize | ||
| md5._blocksize = 16; | ||
| md5._digestsize = 16; | ||
| module.exports = function (message, options) { | ||
| if (message === undefined || message === null) | ||
| throw new Error('Illegal argument ' + message); | ||
| var digestbytes = crypt$1.wordsToBytes(md5(message, options)); | ||
| return options && options.asBytes ? digestbytes : | ||
| options && options.asString ? bin.bytesToString(digestbytes) : | ||
| crypt$1.bytesToHex(digestbytes); | ||
| }; | ||
| })(); | ||
| }); | ||
| function styleInject(css, ref) { | ||
| if ( ref === void 0 ) ref = {}; | ||
| var insertAt = ref.insertAt; | ||
| if (!css || typeof document === 'undefined') { return; } | ||
| var head = document.head || document.getElementsByTagName('head')[0]; | ||
| var style = document.createElement('style'); | ||
| style.type = 'text/css'; | ||
| if (insertAt === 'top') { | ||
| if (head.firstChild) { | ||
| head.insertBefore(style, head.firstChild); | ||
| } else { | ||
| head.appendChild(style); | ||
| } | ||
| } else { | ||
| head.appendChild(style); | ||
| } | ||
| if (style.styleSheet) { | ||
| style.styleSheet.cssText = css; | ||
| } else { | ||
| style.appendChild(document.createTextNode(css)); | ||
| } | ||
| } | ||
| var css_248z = ".likertScale {\n\tmargin-bottom: 1em;\n}\n.likertBand {\n display: flex;\n padding-top: 1em;\n}\n.likertResponse {\n flex: 1 1 5em;\n text-align: center;\n position: relative;\n}\n.likertLine {\n display: inline-block;\n width: 50%;\n vertical-align: top;\n margin-top: 0.5em;\n border-top: 3px solid dimgray;\n}\n.likertResponse:first-child .likertLine:first-child {\n visibility: hidden;\n}\n.likertResponse:last-child>.likertLine:nth-child(2) {\n visibility: hidden;\n}\n.likertIndicator {\n display: inline-block;\n width: 1em;\n height: 1em;\n border-radius: 0.5em;\n border: thin solid #006fc4;\n background-color: #faeabd;\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n top: 0;\n box-sizing: border-box;\n}\n.likertResponse:hover .likertIndicator {\n background-color: white;\n border-width: 3px;\n}\n.likertText {\n display: inline-block;\n padding-top: 0.4em;\n}\n.likertScale.isKeyboardUser .likertResponse > input:focus ~ .likertText {\n /* This rule is for accessibility. Keyboard users will get a blue shadow around the text when\n tabbed into the Likert scale. */\n box-shadow: 0 0 5px 2px rgba(0, 119, 195, 0.5);\n}\n.likertResponse>input:checked+.likertIndicator {\n background-color: #006fc4;\n}\n.visuallyHidden { \n position: absolute; \n overflow: hidden; \n clip: rect(0 0 0 0); \n height: 1px; width: 1px; \n margin: -1px; padding: 0; border: 0; \n}\n\n@media only print {\n .likertResponse>input:checked+.likertIndicator {\n border-width: 0.5em !important;\n border-color: black !important;\n }\n}\n"; | ||
| styleInject(css_248z); | ||
| // with hooks. | ||
| class LikertScale extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
| _defineProperty(this, "onChosen", evt => { | ||
| if (typeof this.props.picked === 'function') { | ||
| this.props.picked(evt.target.value); | ||
| } | ||
| }); | ||
| _defineProperty(this, "listenForTab", evt => { | ||
| if (evt.key === 'Tab') { | ||
| this.setState({ | ||
| isKeyboardUser: true | ||
| }); | ||
| } | ||
| }); | ||
| this.state = { | ||
| isKeyboardUser: false | ||
| }; | ||
| } | ||
| componentDidMount() { | ||
| document.addEventListener('keydown', this.listenForTab); | ||
| } | ||
| componentWillUnmount() { | ||
| document.removeEventListener('keydown', this.listenForTab); | ||
| } | ||
| render() { | ||
| const { | ||
| question, | ||
| responses, | ||
| id, | ||
| className = '', | ||
| likertRef, | ||
| ...restProps | ||
| } = this.props; | ||
| const hash = String(md5(question)).substring(0, 7); | ||
| const radios = responses.map((response, idx) => { | ||
| const uniqueKey = "".concat(hash).concat(idx); | ||
| return /*#__PURE__*/React.createElement("label", { | ||
| key: uniqueKey, | ||
| htmlFor: uniqueKey, | ||
| className: "likertResponse" | ||
| }, /*#__PURE__*/React.createElement("span", { | ||
| className: "likertLine" | ||
| }), /*#__PURE__*/React.createElement("span", { | ||
| className: "likertLine" | ||
| }), /*#__PURE__*/React.createElement("input", { | ||
| type: "radio", | ||
| value: response.value, | ||
| name: hash, | ||
| id: uniqueKey, | ||
| className: "visuallyHidden", | ||
| onClick: this.onChosen | ||
| }), /*#__PURE__*/React.createElement("span", { | ||
| className: "likertIndicator" | ||
| }), /*#__PURE__*/React.createElement("span", { | ||
| className: "likertText" | ||
| }, response.text)); | ||
| }); | ||
| const cn = classnames('likertScale', className, { | ||
| isKeyboardUser: this.state.isKeyboardUser | ||
| }); | ||
| return /*#__PURE__*/React.createElement("fieldset", _extends({ | ||
| className: cn, | ||
| ref: likertRef, | ||
| id: id || hash | ||
| }, restProps), /*#__PURE__*/React.createElement("legend", null, question), /*#__PURE__*/React.createElement("div", { | ||
| className: "likertBand" | ||
| }, radios)); | ||
| } | ||
| } | ||
| var likert = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(LikertScale, _extends({}, props, { | ||
| likertRef: ref | ||
| }))); | ||
| export default likert; | ||
| import e from"react";function n(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function t(){return(t=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i])}return e}).apply(this,arguments)}!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===t&&i.firstChild?i.insertBefore(r,i.firstChild):i.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}(".likertScale {\n\tmargin-bottom: 1em;\n}\n.likertBand {\n display: flex;\n padding-top: 1em;\n}\n.likertResponse {\n flex: 1 1 5em;\n text-align: center;\n position: relative;\n}\n.likertLine {\n display: inline-block;\n width: 50%;\n vertical-align: top;\n margin-top: 0.5em;\n border-top: 3px solid dimgray;\n}\n.likertResponse:first-child .likertLine:first-child {\n visibility: hidden;\n}\n.likertResponse:last-child>.likertLine:nth-child(2) {\n visibility: hidden;\n}\n.likertIndicator {\n display: inline-block;\n width: 1em;\n height: 1em;\n border-radius: 0.5em;\n border: thin solid #006fc4;\n background-color: #faeabd;\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n top: 0;\n box-sizing: border-box;\n}\n.likertResponse:hover .likertIndicator {\n background-color: white;\n border-width: 3px;\n}\n.likertText {\n display: inline-block;\n padding-top: 0.4em;\n}\n.likertScale.isKeyboardUser .likertResponse > input:focus ~ .likertText {\n /* This rule is for accessibility. Keyboard users will get a blue shadow around the text when\n tabbed into the Likert scale. */\n box-shadow: 0 0 5px 2px rgba(0, 119, 195, 0.5);\n}\n.likertResponse>input:checked+.likertIndicator {\n background-color: #006fc4;\n}\n.visuallyHidden { \n position: absolute; \n overflow: hidden; \n clip: rect(0 0 0 0); \n height: 1px; width: 1px; \n margin: -1px; padding: 0; border: 0; \n}\n\n@media only print {\n .likertResponse>input:checked+.likertIndicator {\n border-width: 0.5em !important;\n border-color: black !important;\n }\n}\n");class i extends e.Component{constructor(e){super(e),n(this,"onChosen",(e=>{"function"==typeof this.props.picked&&this.props.picked(e.target.value)})),n(this,"listenForTab",(e=>{"Tab"===e.key&&this.setState({isKeyboardUser:!0})})),this.state={isKeyboardUser:!1}}componentDidMount(){document.addEventListener("keydown",this.listenForTab)}componentWillUnmount(){document.removeEventListener("keydown",this.listenForTab)}render(){const{question:n,responses:i,id:r,className:o="",likertRef:a,...l}=this.props,s=function(e){let n=5381,t=e.length;for(;t;)n=33*n^e.charCodeAt(--t);return n>>>0}(n),d=i.map(((n,t)=>{const i="".concat(s).concat(t);return e.createElement("label",{key:i,htmlFor:i,className:"likertResponse"},e.createElement("span",{className:"likertLine"}),e.createElement("span",{className:"likertLine"}),e.createElement("input",{type:"radio",value:n.value,name:s,id:i,className:"visuallyHidden",onClick:this.onChosen}),e.createElement("span",{className:"likertIndicator"}),e.createElement("span",{className:"likertText"},n.text))}));let c="likertScale";return c+=o?" ".concat(o):"",c+=this.state.isKeyboardUser?" isKeyboardUser":"",e.createElement("fieldset",t({className:c,ref:a,id:r||s},l),e.createElement("legend",null,n),e.createElement("div",{className:"likertBand"},d))}}var r=e.forwardRef(((n,r)=>e.createElement(i,t({},n,{likertRef:r}))));export default r; |
| { | ||
| "name": "react-likert-scale", | ||
| "version": "3.0.0", | ||
| "description": "A React-based Likert Scale to collect data.", | ||
| "version": "3.0.1", | ||
| "description": "A React component that makes a Likert Scale for collecting data.", | ||
| "comments": [ | ||
@@ -25,3 +25,3 @@ "`main` is traditionally a script/program, but in our case it is an ES module.", | ||
| "author": "Craig Creeger", | ||
| "license": "ISC", | ||
| "license": "CC0-1.0", | ||
| "scripts": { | ||
@@ -35,4 +35,4 @@ "lint": "eslint src", | ||
| "peerDependencies": { | ||
| "react": ">=16.8.0", | ||
| "react-dom": ">=16.8.0" | ||
| "react": ">=16.0.0", | ||
| "react-dom": ">=16.0.0" | ||
| }, | ||
@@ -59,2 +59,3 @@ "devDependencies": { | ||
| "rollup-plugin-postcss": "^4.0.0", | ||
| "rollup-plugin-terser": "^7.0.2", | ||
| "style-loader": "^2.0.0", | ||
@@ -65,6 +66,3 @@ "webpack": "^5.12.3", | ||
| }, | ||
| "dependencies": { | ||
| "classnames": "^2.2.6", | ||
| "md5": "^2.3.0" | ||
| } | ||
| "dependencies": {} | ||
| } |
| React Likert Scale | ||
| ====================================== | ||
| React Likert Scale is a [React component](https://reactjs.org/docs) that renders a Likert Scale. It | ||
| is fully responsive, very small size (about 9kb), and the styling can be customized by providing | ||
| your own CSS styles. | ||
| A React component that makes a Likert Scale for collecting data. It has the following features: | ||
| * it is fully responsive (looks great on laptops and phones) | ||
| * has a very small size (less than 4kb) | ||
| * has zero-dependencies | ||
| * the styling can be customized by providing your own CSS styles | ||
|  | ||
@@ -12,3 +15,3 @@ | ||
| `npm install -P react-likert-scale` | ||
| `npm i react-likert-scale` | ||
@@ -51,2 +54,3 @@ | ||
| ## FAQ | ||
@@ -99,3 +103,3 @@ | ||
| Sure. They will be applied to the likert component’s top-level DOM element, `<fieldset>`. e.g.: | ||
| Sure. They will be applied to the likert component’s top-level DOM element, `<fieldset>`. | ||
@@ -112,1 +116,6 @@ ```javascript | ||
| ``` | ||
| ### It doesn’t work. What now? | ||
| Let me know. I really want to make this the best component possible. | ||
| [Create an issue](https://github.com/Craig-Creeger/react-likert-scale/issues) on GitHub. |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Dependency count
- decreased by-50%
2
- Number of package files
- increased by25%
5
- Number of lines in readme file
- increased by8.26%
118
Worsened metrics
- Total package byte prevSize
- decreased by-24.44%
17895
- Dev dependency count
- increased by4.35%
24
- Lines of code
- decreased by-96.9%
14
Dependency changes
- Removedclassnames@^2.2.6
- Removedmd5@^2.3.0
- Removedcharenc@0.0.2(transitive)
- Removedclassnames@2.5.1(transitive)
- Removedcrypt@0.0.2(transitive)
- Removedis-buffer@1.1.6(transitive)
- Removedmd5@2.3.0(transitive)