React Tabs Carousel

A React component to generate React Tabs Carousel for rendering to the DOM.

Installation

npm

npm install react-tabs-carousel

yarn

yarn add react-tabs-carousel

pnpm

pnpm add react-tabs-carousel

Usage

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. |