1.0.1 • Published 3 years ago

@practical-react-hooks/use-tabs v1.0.1

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

@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

ArgumentTypeDescriptionRequired
initialTabnumberThe index you want to start in arrayyes
allTabsarrayThe array you want to use on your documentyes