1.0.1 • Published 4 years ago

@ej-hooks/use-tabs v1.0.1

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

@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

ArgumentTypeDescriptionRequired
initialTabnumberInitial index valueyes
allTabsarrayContent arrayyes

Return

Return valueTypeDescriptionDefault value
currentItemobjectAn object containing the content of indexallTabscurrentIndex
changeItemfunctionFunction to change the index to current indexsetCurrentIndex