reactjs-bottom-navigation - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

dist/index.js

@@ -26,11 +26,27 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
   var items = _ref.items,
-      _ref$defaultSelectedT = _ref.defaultSelectedTab,
-      defaultSelectedTab = _ref$defaultSelectedT === void 0 ? null : _ref$defaultSelectedT,
+      _ref$defaultSelected = _ref.defaultSelected,
+      defaultSelected = _ref$defaultSelected === void 0 ? null : _ref$defaultSelected,
       onItemClick = _ref.onItemClick,
-      noActiveBg = _ref.noActiveBg;
+      noActiveBg = _ref.noActiveBg,
+      activeBgColor = _ref.activeBgColor,
+      activeTextColor = _ref.activeTextColor;
 
-  var _useState = React.useState(defaultSelectedTab),
+  var _useState = React.useState(defaultSelected),
       current = _useState[0],
       setCurrent = _useState[1];
 
+  function getItemStyle() {
+    var style = {};
+
+    if (noActiveBg && !activeBgColor) {
+      style.backgroundColor = 'transparent';
+    }
+
+    if (activeBgColor) {
+      style.backgroundColor = activeBgColor;
+    }
+
+    return style;
+  }
+
   var navItems = items.map(function (item, idx) {
@@ -41,5 +57,3 @@ return /*#__PURE__*/React__default.createElement("div", {
       className: "bottom-nav-item " + (current === idx && 'active'),
-      style: noActiveBg && {
-        backgroundColor: 'transparent'
-      },
+      style: current === idx ? getItemStyle() : {},
       onClick: function onClick() {
@@ -61,3 +75,6 @@ setCurrent(idx);
     }, current !== idx && item.icon ? item.icon : '', current === idx && item.activeIcon ? item.activeIcon : '', item.title && /*#__PURE__*/React__default.createElement("p", {
-      className: "bottom-nav-item--title"
+      className: "bottom-nav-item--title",
+      style: current === idx ? {
+        color: activeTextColor
+      } : {}
     }, item.title));
@@ -64,0 +81,0 @@ });

dist/index.modern.js

@@ -23,11 +23,27 @@ import React, { useState } from 'react';
   var items = _ref.items,
-      _ref$defaultSelectedT = _ref.defaultSelectedTab,
-      defaultSelectedTab = _ref$defaultSelectedT === void 0 ? null : _ref$defaultSelectedT,
+      _ref$defaultSelected = _ref.defaultSelected,
+      defaultSelected = _ref$defaultSelected === void 0 ? null : _ref$defaultSelected,
       onItemClick = _ref.onItemClick,
-      noActiveBg = _ref.noActiveBg;
+      noActiveBg = _ref.noActiveBg,
+      activeBgColor = _ref.activeBgColor,
+      activeTextColor = _ref.activeTextColor;
 
-  var _useState = useState(defaultSelectedTab),
+  var _useState = useState(defaultSelected),
       current = _useState[0],
       setCurrent = _useState[1];
 
+  function getItemStyle() {
+    var style = {};
+
+    if (noActiveBg && !activeBgColor) {
+      style.backgroundColor = 'transparent';
+    }
+
+    if (activeBgColor) {
+      style.backgroundColor = activeBgColor;
+    }
+
+    return style;
+  }
+
   var navItems = items.map(function (item, idx) {
@@ -38,5 +54,3 @@ return /*#__PURE__*/React.createElement("div", {
       className: "bottom-nav-item " + (current === idx && 'active'),
-      style: noActiveBg && {
-        backgroundColor: 'transparent'
-      },
+      style: current === idx ? getItemStyle() : {},
       onClick: function onClick() {
@@ -58,3 +72,6 @@ setCurrent(idx);
     }, current !== idx && item.icon ? item.icon : '', current === idx && item.activeIcon ? item.activeIcon : '', item.title && /*#__PURE__*/React.createElement("p", {
-      className: "bottom-nav-item--title"
+      className: "bottom-nav-item--title",
+      style: current === idx ? {
+        color: activeTextColor
+      } : {}
     }, item.title));
@@ -61,0 +78,0 @@ });

package.json

 {
   "name": "reactjs-bottom-navigation",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "reactjs bottom navigation menu component",
@@ -5,0 +5,0 @@ "author": "hoseinhamzei",

README.md

@@ -72,3 +72,3 @@ # reactjs-bottom-navigation
         items={bottomNavItems}
-        defaultSelectedTab={0}
+        defaultSelected={0}
         onItemClick={(item) => console.log(item)}
@@ -89,3 +89,3 @@ />
 
-| defaultSelectedTab | number | null | default active item |
+| defaultSelected | number | null | default active item |
 
@@ -96,2 +96,6 @@ | onItemClick | function | - | triggers when an item is clicked and it returns the item including it's index |
 
+| activeBgColor | boolean | false | custom active background color |
+
+| activeTextColor | boolean | false | custom active text color |
+
 ## Item Structure
@@ -121,4 +125,6 @@
 
+you can also use "activeBgColor" and "activeTextColor" props
+
 ## License
 
 MIT © [hoseinhamzei](https://github.com/hoseinhamzei)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16658

increased by18.66%

Lines of code

168

increased by18.31%

Number of lines in readme file

127

increased by4.96%

No dependency changes