1.0.1 • Published 1 year ago

@ggns/use-tabs v1.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago
* usage
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"
  }
];

const useTabs = (initialTab, allTabs) => {
  if (!allTabs || !Array.isArray(allTabs)) { 
    return; // useTabs를 사용할 때 두번째 매개변수를 주지 않거나, 두번째 매개변수가 매열이 아니라면 return(에러 페이지 뜨지 않게)
  }
  const [currentIndex, setCurrentIndex] = useState(initialTab);
  return {
    currentItem: allTabs[currentIndex],
    changeItem: setCurrentIndex
  };
};

const App = () => {
  const { currentItem, changeItem } = useTabs(0, content);
  return (
    <div className="App">
      {content.map((section, index) => (
        <button onClick={() => changeItem(index)}>{section.tab}</button>
      ))}
      <div>{currentItem.content}</div>
    </div>
  );
};

export default App;