React-tabs-carousel NPM

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.