react-tab-component-pure-js
v1.0.9
Published
A customizable React tab component with no built-in CSS.
Downloads
15
Maintainers
Readme
react-tab-component-pure-js
A customizable React tab component with no CSS, allowing you to style it as you see fit.
Installation
To install the component, use npm or yarn:
npm install react-tab-component-pure-js
or
yarn add react-tab-component-pure-js
Usage
Here’s a basic example of how to use the react-tab-component-pure-js in your React project:
import React, { useState } from 'react';
import { Tab } from 'react-tab-component-pure-js';
const Tab1 = () => <div>Content for Tab 1</div>;
const Tab2 = () => <div>Content for Tab 2</div>;
const App = () => {
const [currentTabIndex, setCurrentTabIndex] = useState(0);
const tabList = [
{ name: 'Tab 1', Component: Tab1 },
{ name: 'Tab 2', Component: Tab2 },
];
const handleTabClick = (index: number) => {
setCurrentTabIndex(index);
};
return (
<Tab
tabList={tabList}
currentTabIndex={currentTabIndex}
tabClickHandler={handleTabClick}
selectTabClass="selected-tab"
unselectedTabClass="unselected-tab"
tabContainerClass="tab-container"
tabOptionsClass="tab-options"
/>
);
};
export default App;
Props
tabList: An array of objects representing each tab. Each object should have:
- tabList: An array of objects representing each tab. Each object should have:
- name: The name of the tab.
- Component: The component to render when the tab is selected.
- Component: The component to render when the tab is selected.
- currentTabIndex: The index of the currently selected tab.
- tabClickHandler: A function to handle tab clicks. It receives the index of the clicked tab.
- selectTabClass: The CSS class for the selected tab.
- unselectedTabClass: The CSS class for the unselected tabs.
- tabContainerClass: The CSS class for the tab container.
Example Styles
Here is an example of how you can style the tabs:
.tab-container {
display: flex;
flex-direction: column;
}
.tab-options {
display: flex;
border-bottom: 1px solid #ccc;
}
.selected-tab {
padding: 10px 20px;
border: 1px solid #ccc;
border-bottom: none;
cursor: pointer;
background-color: #f9f9f9;
}
.unselected-tab {
padding: 10px 20px;
cursor: pointer;
}