react-tab-component-pure-js - npm Package Compare versions

Comparing version 1.0.9 to 1.0.10

dist/index.d.ts

@@ -13,4 +13,8 @@ import React from "react";
     tabOptionsClass?: string;
+    selectTabStyle?: React.CSSProperties;
+    unselectedTabStyle?: React.CSSProperties;
+    tabContainerStyle?: React.CSSProperties;
+    tabOptionsStyle?: React.CSSProperties;
 }
 export declare const Tab: React.FC<TabProps>;
 export {};

dist/index.js

@@ -32,8 +32,18 @@ "use strict";
     _h = _a.tabOptionsClass,
-    tabOptionsClass = _h === void 0 ? "" : _h;
+    tabOptionsClass = _h === void 0 ? "" : _h,
+    _j = _a.selectTabStyle,
+    selectTabStyle = _j === void 0 ? {} : _j,
+    _k = _a.unselectedTabStyle,
+    unselectedTabStyle = _k === void 0 ? {} : _k,
+    _l = _a.tabContainerStyle,
+    tabContainerStyle = _l === void 0 ? {} : _l,
+    _m = _a.tabOptionsStyle,
+    tabOptionsStyle = _m === void 0 ? {} : _m;
   return (0, jsx_runtime_1.jsxs)("div", __assign({
-    className: tabContainerClass
+    className: tabContainerClass,
+    style: tabContainerStyle
   }, {
     children: [(0, jsx_runtime_1.jsx)("div", __assign({
       className: tabOptionsClass,
+      style: tabOptionsStyle,
       role: "tablist",
@@ -46,2 +56,3 @@ "aria-label": "Tabs"
           className: currentTabIndex === index ? selectTabClass : unselectedTabClass,
+          style: currentTabIndex === index ? selectTabStyle : unselectedTabStyle,
           role: "tab",
@@ -48,0 +59,0 @@ "aria-selected": currentTabIndex === index,

package.json

 {
   "name": "react-tab-component-pure-js",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "repository": {
@@ -5,0 +5,0 @@ "type": "git",

README.md

 # react-tab-component-pure-js
 
-A customizable React tab component with no CSS, allowing you to style it as you see fit.
+A customizable React tab component with no pre-defined CSS, allowing you to style it as you see fit using classes or inline styles.
 
@@ -49,2 +49,6 @@ ## Installation
       tabOptionsClass="tab-options"
+      selectTabStyle={{ color: 'white', backgroundColor: 'blue' }}
+      unselectedTabStyle={{ color: 'gray', backgroundColor: 'lightgray' }}
+      tabContainerStyle={{ border: '1px solid black', padding: '10px' }}
+      tabOptionsStyle={{ display: 'flex', gap: '10px' }}
     />
@@ -55,19 +59,25 @@ );
 export default App;
-
-
 ```
 
 ## Props
-### tabList: An array of objects representing each tab. Each object should have:
-- tabList: An array of objects representing each tab. Each object should have:
-  - name: The name of the tab.
-  - Component: The component to render when the tab is selected.
-- Component: The component to render when the tab is selected.
-- currentTabIndex: The index of the currently selected tab.
-- tabClickHandler: A function to handle tab clicks. It receives the index of the clicked tab.
-- selectTabClass: The CSS class for the selected tab.
-- unselectedTabClass: The CSS class for the unselected tabs.
-- tabContainerClass: The CSS class for the tab container.
+### Required Props
+- tabList: An array of objects representing each tab.Each object should have:
+  - name: The name of the tab (string).
+  - Component: The component to render when the tab is selected (React.FC).
+- currentTabIndex: The index of the currently selected tab (number).
 
+### Optional Props
+  - tabClickHandler: A function to handle tab clicks. It receives the index of the clicked tab (function).
+  - selectTabClass: The CSS class for the selected tab (string).
+  - unselectedTabClass: The CSS class for the unselected tabs (string).
+  - tabContainerClass: The CSS class for the tab container (string).
+  - tabOptionsClass: The CSS class for the tab options container (string).
 
+### Inline Style Support (Optional Props)
+- selectTabStyle: Inline styles for the selected tab (React.CSSProperties).
+- unselectedTabStyle: Inline styles for the unselected tabs (React.CSSProperties).
+- tabContainerStyle: Inline styles for the tab container (React.CSSProperties).
+- tabOptionsStyle: Inline styles for the tab options container (React.CSSProperties).
+
+
 ## Example Styles
@@ -74,0 +84,0 @@

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

7739

increased by21.24%

Lines of code

100

increased by17.65%

Number of lines in readme file

116

increased by9.43%

No dependency changes