1.0.1 • Published 3 years ago
@practical-react-hooks/use-tabs v1.0.1
@practical-react-hooks/use-tabs
React Hook to use content easily in array of objects inside.
Installation
yarn
yarn add @practical-react-hooks/use-tabs
npm
npm i @practical-react-hooks/use-tabs
Usage
import React from "react";
import useTabs from "@practical-react-hooks/use-tabs";
const content = [
{
tab: "Section 1",
content: "This is the content of the Section 1"
},
{
tab: "Section 2",
content: "This is the content of the Section 2"
},
...
];
function App() {
const { currentItem, changeItem } = useTabs(0, content);
return (
<div>
{content.map((section, index) => (<button onClick={() => changeItem(index)}>{section.tab}</button>))}
<h1>{currentItem.content}</h1>
</div>
);
}
Arguments
Argument | Type | Description | Required |
---|---|---|---|
initialTab | number | The index you want to start in array | yes |
allTabs | array | The array you want to use on your document | yes |