@ej-hooks/use-tabs
v1.0.1
Published
React Hook to switch sections with tabs.
Downloads
5
Maintainers
Readme
@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 |