Getting started

Demo

https://react-scrollable-tabs.vercel.app/

Compatibility

Your project needs to use React 16.8 or later. react-smooth-tabs uses modern web technologies. That's why it's so fast, lightweight and easy to style. This, however, comes at a cost of supporting only modern browsers.

Features

• Slide with Transitions
• Fullscreen support
• Responsive design
• Customizable tab icons and colors
• Horizontal/Vertical tab positioning
• Customizable active tab highlight color and background color

Explanation of Props:

• tabs: The array of objects representing the tabs. Each object must have a value, label, and icon property.
• activeTab: The currently active tab’s value (e.g., "activeOrders").
• setActiveTab: A function that updates the active tab.
• activeColor: The color for the active tab (e.g., "#008080").
• lineColor: The color of the underline indicating the active tab.
• position: Set the tab positioning to either Horizontal or Vertical.
• displayArrows: A boolean that controls the visibility of the navigation arrows.
• leftArrow and rightArrow: The custom icons/images for the left and right navigation arrows.
• className: Additional class names for styling the component (optional).
• Quantity: Add the JSON format to the key as shown below to enable quantity (e.g., qty: { color: "#FF4081", value: "10" }).

Installation

Add react-Smooth-tabs to your project by executing npm install react-smooth-tabs or yarn add react-smooth-tabs.

Usage

1import { ScrollableTabs } from "react-smooth-tabs";
2import "react-smooth-tabs/dist/index.css";

1import { leftArowIcon, rightArrowIcon } from "@images";
2
3function App() {
4  let [activeTab, setActiveTab] = useState("activeOrders");
5
6  const tabsWithoutQTY = [
7    {
8      value: "IntractiveReports",
9      label: "Intractive Reports ",
10      icon: <img src={ReportIcon} className="h-[1.5rem] w-[1.5rem]" />,
11    },
12    {
13      value: "PlayGround",
14      label: "PlayGround",
15      icon: <img src={playgroundIcon} className="h-[1.5rem] w-[1.5rem]" />,
16    },
17    {
18      value: "FileChanges",
19      label: "File Changes",
20      icon: <img src={fileChangeIcon} className="h-[1.5rem] w-[1.5rem]" />,
21      qty: { color: "#FF4081", value: "10" },
22    },
23    {
24      value: "Segementation",
25      label: "Segementation",
26      icon: <img src={segmentIcon} className="h-[1.5rem] w-[1.5rem]" />,
27    },
28    {
29      value: "Docunmentation",
30      label: "Docunmentation",
31      icon: <img src={documentIcon} className="h-[1.5rem] w-[1.5rem]" />,
32    },
33    {
34      value: "CustomerStories",
35      label: "Customer Stories",
36      icon: <img src={storiesicon} className="h-[1.5rem] w-[1.5rem]" />,
37    },
38    {
39      value: "GroupAnaytics",
40      label: "Group Anaytics",
41      icon: <img src={revinueIcon} className="h-[1.5rem] w-[1.5rem]" />,
42    },
43    {
44      value: "Conversion",
45      label: "Conversion",
46      icon: <img src={conversionIcon} className="h-[1.5rem] w-[1.5rem]" />,
47    },
48    {
49      value: "Portals",
50      label: "Portals",
51      icon: <img src={portalIcon} className="h-[1.5rem] w-[1.5rem]" />,
52    },
53  ];
54  return (
55    <ScrollableTabs
56      tabs={tabsWithoutQTY}
57      activeTab={activeTab}
58      setActiveTab={setActiveTab}
59      activeColor="#008080"
60      lineColor="#008080"
61      position="Horizontal"
62      displayArrows={true}
63      leftArrow={leftArowIcon}
64      rightArrow={rightArrowIcon}
65      className="flex flex-col gap-2  items-center justify-center"
66    />
67  );
68}
69
70
71export default App;