react-smooth-tabs
v1.4.1
Published
Advance Smooth and fast cross platform Tabs for React.
Downloads
24
Maintainers
Readme
Getting started
Advance Smooth and fast cross platform Tabs for React.
Demo
https://react-scrollable-tabs.vercel.app/
Compatibility
Your project needs to use React 16.8 or later. react-smooth-tabs utilizes modern web technologies, making it fast, lightweight, and easy to style. As a result, it supporting only modern browsers.
Features
- Slide with Transitions
- Fullscreen support
- Responsive design
Installation
Add react-Smooth-tabs to your project by executing npm install react-smooth-tabs
or yarn add react-smooth-tabs
.
Add Tailwind css into your React Project .
Usage
import { ScrollableTabs } from "react-smooth-tabs";
import "react-smooth-tabs/dist/index.css";
import { LeftIcon, RightIcon } from "@images";
function App() {
let [activeTab, setActiveTab] = useState("activeOrders");
const tabs = [
{
value: "IntractiveReports",
label: "Intractive Reports ",
icon: <TbReportSearch className="h-10 w-10" />,
qty: 14,
},
{
value: "PlayGround",
label: "PlayGround",
icon: <CgDisplayGrid className="h-10 w-10" />,
},
{
value: "FileChanges",
label: "File Changes",
icon: <FaFileContract className="h-10 w-10" />,
qty: 10,
},
{
value: "LimitLessSegementation",
label: "LimitLess Segementation",
icon: <PiLineSegmentsDuotone className="h-10 w-10" />,
},
{
value: "Docunmentation",
label: "Docunmentation",
icon: <IoDocumentAttach className="h-10 w-10" />,
},
{
value: "CustomerStories",
label: "Customer Stories",
icon: <MdAutoStories className="h-10 w-10" />,
},
{
value: "GroupAnaytics",
label: "Group Anaytics",
icon: <TbBrandGoogleAnalytics className="h-10 w-10" />,
},
{
value: "Conversion",
label: "Conversion",
icon: <GiRugbyConversion className="h-10 w-10" />,
},
{
value: "Portals",
label: "Portals",
icon: <AiFillCustomerService className="h-10 w-10" />,
},
];
return (
<ScrollableTabs
tabs={tabs}
activeTab={activeTab}
setActiveTab={setActiveTab}
position="Horizontal"
displayArrows={true}
leftArrow={swipeIcon}
rightArrow={swipeIcon}
className="flex flex-col gap-2 items-center justify-center"
/>
);
}
export default App;