howToCodeWell/tabs

React Tabs for HTCW

Tabs React Component

This component displays tabs. It is used as part of https://howtocodewell.net

Install

$ npm install @howtocodewell/tabs

Example

To see an example of the component run

$ npm start

Test

To test the component

$ npm  test

Usage

import { TabList, Tab } from '@howtocodewell/tabs'

<TabList containerClassName={`tab-container`} listClassName={`list-reset flex border-b`}>
  <Tab label={`First Tab`} className={`bg-gray-500 border-r-2 border-gray-100 inline-block py-2 px-4 text-pink-300 font-semibold hover:text-black hover:bg-pink-300`} onClick={ () => alert('Hello Coders')  } />
  <Tab label={`Second Tab`} className={`bg-gray-500 inline-block py-2 px-4 text-pink-300 font-semibold hover:text-black hover:bg-pink-300`} onClick={ () => alert('Happy Coding')  } />
</TabList>