@ziphooks/use-tabs

React Hook for get value in array more convenient. It can use on moving section.

Installation

yarn

yarn add @ziphooks/use-tabs

npm

npm i @ziphooks/use-tabs

Usage

import React from "react";
import useTabs from "@ziphooks/use-tabs";

function App() {
  const sections = [
      {
          "title": "Home", 
          "body": "Welcome to Home"
      }, 
      {
          "title": "Blog", 
          "body": "Welcome to Blog"
      }, 
      {
          "title": "Contact", 
          "body": "Welcome to Contact"
      }
  ];
  const { currentItem, changeItem } = useTabs(0, sections);
  return (
      <div>
        {sections.map((section, index) => (
            <button onClick={() => changeItem(index)}>
              {section.title}
            </button>
        ))}
        <h1>{currentItem.title}</h1>
        <p>{currentItem.body}</p>
      </div>
  );
};

Arguments

| Argument | Type | Description | Required | | -- | -- | -- | -- | | initalTab | Number | A number for initial tab's index | true | | allTabs | Array | An array for use in this React Hook | true |

Return

| Return value | Type | Description | | -- | -- | -- | | currentItem | Any | A data that is current tab | | changeItem | Function | A function that receives index to change current tab |