react-switch-selector - npm Package Compare versions

Comparing version 1.2.0 to 1.2.1

dist/SwitchSelector.d.ts

 import * as React from "react";
 import { StylingPropsTypes } from "./SwitchSelector.styled";
 export declare type OptionType = {
-    label: string;
+    label: string | number | React.ReactElement | HTMLElement;
     value: unknown;
@@ -11,3 +11,3 @@ selectedBackgroundColor?: string;
 export interface Props extends Partial<StylingPropsTypes> {
-    onChange: (x?: unknown) => unknown | void;
+    onChange: <T extends any>(val: T) => void;
     options: Array<OptionType>;
@@ -14,0 +14,0 @@ initialSelectedIndex?: number;

dist/SwitchSelector.js

 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -6,2 +17,3 @@ var React = require("react");
 var SwitchSelector_styled_1 = require("./SwitchSelector.styled");
+var defaultColors_1 = require("./defaultColors");
 var classNamesPrefix = "react-switch-selector";
@@ -16,3 +28,3 @@ var SwitchSelector = function (props) {
     }
-    var _f = props.border, border = _f === void 0 ? 0 : _f, _g = props.backgroundColor, backgroundColor = _g === void 0 ? "#ecf0f1" : _g, _h = props.selectedBackgroundColor, selectedBackgroundColor = _h === void 0 ? "#2ecc71" : _h, _j = props.wrapperBorderRadius, wrapperBorderRadius = _j === void 0 ? 20 : _j, _k = props.optionBorderRadius, optionBorderRadius = _k === void 0 ? 18 : _k, _l = props.fontSize, fontSize = _l === void 0 ? 14 : _l, _m = props.fontColor, fontColor = _m === void 0 ? "#000" : _m, _o = props.selectedFontColor, selectedFontColor = _o === void 0 ? "#fff" : _o, _p = props.selectionIndicatorMargin, selectionIndicatorMargin = _p === void 0 ? 2 : _p, forcedSelectedIndex = props.forcedSelectedIndex;
+    var _f = props.border, border = _f === void 0 ? 0 : _f, _g = props.backgroundColor, backgroundColor = _g === void 0 ? defaultColors_1.defaultColors.backgroundColor : _g, _h = props.selectedBackgroundColor, selectedBackgroundColor = _h === void 0 ? defaultColors_1.defaultColors.selectedBackgroundColor : _h, _j = props.wrapperBorderRadius, wrapperBorderRadius = _j === void 0 ? 20 : _j, _k = props.optionBorderRadius, optionBorderRadius = _k === void 0 ? 18 : _k, _l = props.fontSize, fontSize = _l === void 0 ? 14 : _l, _m = props.fontColor, fontColor = _m === void 0 ? defaultColors_1.defaultColors.fontColor : _m, _o = props.selectedFontColor, selectedFontColor = _o === void 0 ? defaultColors_1.defaultColors.selectedFontColor : _o, _p = props.selectionIndicatorMargin, selectionIndicatorMargin = _p === void 0 ? 2 : _p, forcedSelectedIndex = props.forcedSelectedIndex;
     react_1.useEffect(function () {
@@ -34,4 +46,10 @@ if (forcedSelectedIndex !== undefined &&
             var _optionId = "rss-option-" + idx;
+            var isRawText = typeof option.label === "string";
+            var labelRawTextProps = {
+                fontSize: fontSize,
+                fontColor: option.fontColor || fontColor,
+                selectedFontColor: option.selectedFontColor || selectedFontColor
+            };
             return (React.createElement(SwitchSelector_styled_1.OptionItem, { key: _optionId, optionsAmount: options.length, className: classNamesPrefix + "-option", optionBorderRadius: optionBorderRadius },
-                React.createElement(SwitchSelector_styled_1.OptionItemLabel, { className: classNamesPrefix + "-option-label", selected: selectedIndex === idx, fontSize: fontSize, fontColor: option.fontColor || fontColor, selectedFontColor: option.selectedFontColor || selectedFontColor },
+                React.createElement(SwitchSelector_styled_1.OptionItemLabel, __assign({ className: classNamesPrefix + "-option-label", selected: selectedIndex === idx, isRawText: isRawText }, (isRawText ? labelRawTextProps : {})),
                     React.createElement(SwitchSelector_styled_1.OptionInput, { type: "radio", id: _optionId, onChange: function () { return handleOnClick(idx); }, checked: selectedIndex === idx }),
@@ -38,0 +56,0 @@ option.label)));

dist/SwitchSelector.styled.d.ts

@@ -22,7 +22,8 @@ /// <reference types="react" />
 export declare const OptionItem: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, OptionItemPropsTypes, object>;
-interface OptionItemLabelPropsTypes extends Pick<StylingPropsTypes, "fontSize" | "fontColor" | "selectedFontColor"> {
+interface OptionItemLabelPropsTypes extends Partial<Pick<StylingPropsTypes, "fontSize" | "fontColor" | "selectedFontColor">> {
+    isRawText: boolean;
     selected: boolean;
 }
 export declare const OptionItemLabel: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, OptionItemLabelPropsTypes, object>;
-export declare const OptionInput: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, Pick<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "max" | "required" | "disabled" | "hidden" | "dir" | "form" | "slot" | "style" | "title" | "pattern" | "color" | "size" | "multiple" | "height" | "translate" | "width" | "children" | "list" | "step" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "maxLength" | "min" | "minLength" | "name" | "readOnly" | "src" | "type" | "value">, object>;
+export declare const OptionInput: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, Pick<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "max" | "required" | "disabled" | "hidden" | "dir" | "form" | "slot" | "style" | "title" | "pattern" | "color" | "size" | "multiple" | "height" | "translate" | "width" | "prefix" | "src" | "children" | "list" | "step" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "maxLength" | "min" | "minLength" | "name" | "readOnly" | "type" | "value">, object>;
 export {};

dist/SwitchSelector.styled.js

@@ -7,8 +7,12 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.OptionInput = exports.OptionItemLabel = exports.OptionItem = exports.SwitchSelectorWrapper = void 0;
 var styled_1 = require("@emotion/styled");
 exports.SwitchSelectorWrapper = styled_1.default("div")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    border-radius: ", "px;\n    border: ", ";\n    background: ", ";\n    width: 100%;\n    height: 100%;\n    position: relative;\n\n    ::before {\n        top: 50%;\n        left: ", "%;\n        content: \"\";\n        position: absolute;\n        height: calc(100% - ", "px);\n        width: calc(\n            ", "% -\n                ", "px\n        );\n        border-radius: ", "px;\n        border: ", "px solid\n            ", ";\n        background: ", ";\n        transition: left 0.1s linear, background 0.1s linear;\n        transform: translateY(-50%);\n        z-index: 1;\n        box-sizing: content-box;\n    }\n"], ["\n    display: flex;\n    border-radius: ", "px;\n    border: ", ";\n    background: ", ";\n    width: 100%;\n    height: 100%;\n    position: relative;\n\n    ::before {\n        top: 50%;\n        left: ", "%;\n        content: \"\";\n        position: absolute;\n        height: calc(100% - ", "px);\n        width: calc(\n            ", "% -\n                ", "px\n        );\n        border-radius: ", "px;\n        border: ", "px solid\n            ", ";\n        background: ", ";\n        transition: left 0.1s linear, background 0.1s linear;\n        transform: translateY(-50%);\n        z-index: 1;\n        box-sizing: content-box;\n    }\n"])), function (props) { return props.wrapperBorderRadius; }, function (props) { return props.border; }, function (props) { return props.backgroundColor; }, function (props) { return (props.selectedIndex / props.optionsAmount) * 100; }, function (props) { return 2 * props.selectionIndicatorMargin; }, function (props) { return (1 / props.optionsAmount) * 100; }, function (props) { return 2 * props.selectionIndicatorMargin; }, function (props) { return props.optionBorderRadius; }, function (props) { return props.selectionIndicatorMargin; }, function (props) { return props.backgroundColor; }, function (props) { return props.selectedBackgroundColor; });
 exports.OptionItem = styled_1.default("div")(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    height: 100%;\n    width: ", "%;\n    border-radius: ", "px;\n"], ["\n    display: flex;\n    align-items: center;\n    height: 100%;\n    width: ", "%;\n    border-radius: ", "px;\n"])), function (props) { return (1 / props.optionsAmount) * 100; }, function (props) { return props.optionBorderRadius; });
-exports.OptionItemLabel = styled_1.default("label")(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font-size: ", "px;\n    width: 100%;\n    height: 100%;\n    color: ", ";\n    z-index: 2;\n    transition: color 0.1s linear;\n    cursor: pointer;\n"], ["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font-size: ", "px;\n    width: 100%;\n    height: 100%;\n    color: ", ";\n    z-index: 2;\n    transition: color 0.1s linear;\n    cursor: pointer;\n"])), function (props) { return props.fontSize; }, function (props) { return (props.selected ? props.selectedFontColor : props.fontColor); });
+exports.OptionItemLabel = styled_1.default("label")(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n    z-index: 2;\n    transition: color 0.1s linear;\n    cursor: pointer;\n    font-size: ", ";\n    color: ", ";\n"], ["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n    z-index: 2;\n    transition: color 0.1s linear;\n    cursor: pointer;\n    font-size: ", ";\n    color: ",
+    ";\n"])), function (props) { return (props.isRawText ? props.fontSize + "px" : "unset"); }, function (props) {
+    return props.isRawText ? (props.selected ? props.selectedFontColor : props.fontColor) : "unset";
+});
 exports.OptionInput = styled_1.default.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    width: 0;\n    height: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n    pointer-events: none;\n"], ["\n    width: 0;\n    height: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n    pointer-events: none;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
 //# sourceMappingURL=SwitchSelector.styled.js.map

package.json

 {
   "name": "react-switch-selector",
-  "description": "Data switch/toggle component for React️",
-  "version": "1.2.0",
+  "description": "Data switch/toggle component for React️ ⚛",
+  "version": "1.2.1",
   "main": "dist/index.js",
@@ -18,16 +18,16 @@ "types": "dist/index.d.ts",
   "devDependencies": {
-    "@types/react": "16.9.19",
-    "@types/react-dom": "16.9.5",
-    "@typescript-eslint/eslint-plugin": "3.7.0",
-    "@typescript-eslint/parser": "3.7.0",
-    "eslint": "7.5.0",
+    "@types/react": "16.9.49",
+    "@types/react-dom": "16.9.8",
+    "@typescript-eslint/eslint-plugin": "4.0.1",
+    "@typescript-eslint/parser": "4.0.1",
+    "eslint": "7.8.1",
     "eslint-config-prettier": "6.11.0",
     "eslint-plugin-import": "2.22.0",
     "eslint-plugin-prettier": "3.1.4",
-    "eslint-plugin-react": "7.20.3",
-    "eslint-plugin-react-hooks": "4.0.8",
-    "prettier": "2.0.5",
-    "react": "16.12.0",
-    "react-dom": "16.12.0",
-    "typescript": "3.7.5"
+    "eslint-plugin-react": "7.20.6",
+    "eslint-plugin-react-hooks": "4.1.0",
+    "prettier": "2.1.1",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "typescript": "4.0.2"
   },
@@ -34,0 +34,0 @@ "dependencies": {

README.md

@@ -33,34 +33,34 @@ # [react-switch-selector](https://github.com/GR34SE/react-switch-selector) · [![downloads](https://img.shields.io/npm/dm/react-switch-selector)](https://www.npmjs.com/package/react-switch-selector) [![version](https://img.shields.io/github/package-json/v/GR34SE/react-switch-selector)](https://github.com/GR34SE/react-switch-selector) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
 ```jsx
-    const options = [
-        {
-            label: "Foo",
-            value: {
-                foo: true
-            },
-            selectedBackgroundColor: "#0097e6",
-        },
-        {
-            label: "Bar",
-            value: "bar",
-            selectedBackgroundColor: "#fbc531"
-        }
-    ];
+const options = [
+   {
+       label: <span>Foo</span>,
+       value: {
+            foo: true
+       },
+       selectedBackgroundColor: "#0097e6",
+   },
+   {
+       label: "Bar",
+       value: "bar",
+       selectedBackgroundColor: "#fbc531"
+   }
+];
 
-    const onChange = (newValue) => {
-        console.log(newValue);
-    };
+const onChange = (newValue) => {
+    console.log(newValue);
+};
 
-    const initialSelectedIndex = options.findIndex(({value}) => value === "bar");
+const initialSelectedIndex = options.findIndex(({value}) => value === "bar");
 
-    return (
-        <div className="your-required-wrapper" style={{width: 100, height: 30}}>
-            <SwitchSelector
-                onChange={onChange}
-                options={options}
-                initialSelectedIndex={initialSelectedIndex}
-                backgroundColor={"#353b48"}
-                fontColor={"#f5f6fa"}
-            />
-        </div>
-    );
+return (
+    <div className="your-required-wrapper" style={{width: 100, height: 30}}>
+        <SwitchSelector
+            onChange={onChange}
+            options={options}
+            initialSelectedIndex={initialSelectedIndex}
+            backgroundColor={"#353b48"}
+            fontColor={"#f5f6fa"}
+        />
+    </div>
+);
 ```
@@ -70,5 +70,5 @@
 
-| Prop  name                 | Type                    | Default                 | Required  | Note                                                                             |
-| -------------------------  | ----------------------- | ----------------------- | --------- | -------------------------------------------------------------------------------- |
-| options                    | Array of OptionType     | []                      | true      | Options array to render. Each item has a label value and optional styling props  |
+| Prop name                  | Type                    | Default                 | Required  | Note                                                                             |
+| -------------------------- | ----------------------- | ----------------------- | --------- | -------------------------------------------------------------------------------- |
+| options                    | Array of OptionType     | []                      | true      | Options array to render. Each item has a label, value and optional styling props  |
 | onChange                   | Function                | (v) => (console.log(v)) | true      | onChange callback that returns selected Option's value                           |
@@ -89,9 +89,9 @@ | initialSelectedIndex       | number                  | 0                       | false     | Initially selected index of options array                                        |
 
-| Property  name             | Type                    | Default             | Required  | Note                                                                             |
-| -------------------------  | ----------------------- | ------------------- | --------- | -------------------------------------------------------------------------------- |
-| label                      | string                  | undefined           | true      | Option's text label                                                              |
-| value                      | any                     | undefined           | true      | Option's value that is returned by onChange callback                             |
-| selectedBackgroundColor    | string                  | undefined           | false     | Background of this selected Option                                               |
-| fontColor                  | string                  | undefined           | false     | Font color of this Option's label                                                |
-| selectedFontColor          | string                  | undefined           | false     | Font color of this selected Option's label                                       |
+| Property name              | Type                                   | Default             | Required  | Note                                                                             |
+| -------------------------- | -------------------------------------- | ------------------- | --------- | -------------------------------------------------------------------------------- |
+| label                      | string/number/ReactElement/HTMLElement | undefined           | true      | Option's label                                                              |
+| value                      | any                                    | undefined           | true      | Option's value that is returned by onChange callback                             |
+| selectedBackgroundColor    | string                                 | undefined           | false     | Background of this selected Option                                               |
+| fontColor                  | string                                 | undefined           | false     | Font color of this Option's label                                                |
+| selectedFontColor          | string                                 | undefined           | false     | Font color of this selected Option's label                                       |
 
@@ -98,0 +98,0 @@ ###### Overriding styles by pure css classes is available with react-switch-selector prefix:

No alert changes

Improved metrics

Total package byte prevSize

30429

increased by9.3%

Number of package files

15

increased by25%

Lines of code

172

increased by27.41%

No dependency changes