@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