React Tabs Carousel
A React component to generate React Tabs Carousel for rendering to the DOM.
Installation
npm
npm install react-tabs-carouselyarn
yarn add react-tabs-carouselpnpm
pnpm add react-tabs-carouselUsage
The react-tabs-carousel component offers a single-component export that facilitates the creation of a carousel featuring tabs functionality.
All illustrations are presented employing contemporary JavaScript modules and syntax. Furthermore, compatibility with js, as demonstrated by the usage of require(react-tabs-carousel), is also upheld.
React Tabs Carousel Demo
How to Utilizing the React Tabs Carousel Component
import React from "react";
import ReactTabsCarousel from "react-tabs-carousel";
import "react-tabs-carousel/css/index.css";
const MyComponent = () => {
const tabs = [
{ tabName: "Tab 1", tabContent: <>Content 1</> },
{ tabName: "Tab 2", tabContent: <>Content 2</> },
{ tabName: "Tab 3", tabContent: <>Content 3</> },
{ tabName: "Tab 4", tabContent: <>Content 4</> },
{ tabName: "Tab 5", tabContent: <>Content 5</> },
{ tabName: "Tab 6", tabContent: <>Content 6</> },
{ tabName: "Tab 7", tabContent: <>Content 7</> },
{ tabName: "Tab 8", tabContent: <>Content 8</> },
{ tabName: "Tab 9", tabContent: <>Content 9</> },
{ tabName: "Tab 10", tabContent: <>Content 10</> },
{ tabName: "Tab 11", tabContent: <>Content 11</> },
];
return (
<ReactTabsCarousel tabsList={tabs} tabsToShow={6} tabsToScroll={1} />
);
};
export default MyComponent;Props
| Name | Type | Default Value | Description |
|---|---|---|---|
| tabsList | Array of tabs | {tabs} |
Specify tabs for the tab carousel. |
| tabsToShow | Number | 6 | Specify the desired number of tabs to be displayed. |
| tabsToScroll | Number | 1 | Specify the number of tabs you wish to slide. |
| isFixedWidth | Boolean | false | Facilitate the setting of a fixed tab width by setting the value to "true." |
| previousText | String | Chevron Left | Specify customizable options for the Previous Button, including the provision of custom SVG icons, font icons, and text, is available. ("IconCaretLeft"). |
| nextText | String | Chevron Right | Specify customizable options for the Previous Button, including the next of custom SVG icons, font icons, and text, is available. ("IconCaretRight") |
| className | String | " " | You can specify custom class on main div element. |
| containerClassName | String | " " | You can specify custom class on container div element. |
| contentClassName | String | " " | You can specify custom class on content div element. |
| onClick | Click Event | null | You can specify custom onClick on tab button. |