1.0.1 • Published 3 years ago

@ziphooks/use-tabs v1.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

@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

ArgumentTypeDescriptionRequired
initalTabNumberA number for initial tab's indextrue
allTabsArrayAn array for use in this React Hooktrue

Return

Return valueTypeDescription
currentItemAnyA data that is current tab
changeItemFunctionA function that receives index to change current tab