@ej-hooks/use-tabs
React Hook to switch sections with tabs.
Installation
yarn
yarn add @ej-hooks/use-tabs
npm
npm i @ej-hooks/use-tabs
Usage
import React from 'react';
import useTabs from '@ej-hooks/use-tabs';
const content = [
{
tab: "Section 1",
content: "I'm the content of the Section 1"
},
{
tab: "Section 2",
content: "I'm the content of the Section 2"
}
];
function App() {
const { currentItem, changeItem } = useTabs(0, content);
return (
{content.map((section, index) => (
<button onClick={() => changeItem(index)}>{section.tab}</button>
))}
<div>{currentItem.content}</div>
);
}
Arguments
Argument | Type | Description | Required |
---|---|---|---|
initialTab | number | Initial index value | yes |
allTabs | array | Content array | yes |
Return
Return value | Type | Description | Default value |
---|---|---|---|
currentItem | object | An object containing the content of index | allTabs[currentIndex] |
changeItem | function | Function to change the index to current index | setCurrentIndex |