tabs-react-component

React tabs component for organizing content into separate views where only one view can be visible at a time.
When the list of tab labels exceeds the width of the header, pagination controls appear to let the user scroll left and right across the labels.
The active tab may be set using the activeIndex input or when the user selects one of the tab labels in the header.

!1
!1

Install

``bash
npm install --save tabs-react-component
`

or

`bash
yarn add tabs-react-component
`

Usage

The tabs-react-component provide a two component to recreate the diferent views by dividing content into different tabs.
You have TabContainer that is the wrapper of TabItem components.
You must import the styles of these components

`tsx
import 'tabs-react-component/dist/index.css';
`

$3

`tsx
...
import TabContainer, { TabItem } from 'tabs-react-component';
import 'tabs-react-component/dist/index.css'
...




Content1

Content2

Content3

`

!1

You can set edit the header changing the backgroundColor, color, active-label style and other properties. Also you can pass icon to render with the name of the tabs

`tsx
...
import TabContainer, { TabItem } from 'tabs-react-component';
import 'tabs-react-component/dist/index.css'
...

} name='home'>


Content1

} name='settings'>

Content2

} name='images'>

Content3

`

!1

$3

`tsx




Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur,
doloremque itaque ipsam ducimus sunt minus,
nemo veniam error, neque corporis architecto in laudantium unde!
Assumenda consequuntur eos magnam asperiores? Animi!

Content3

Content3

`

!1

$3

You can use this component nested to another to create a cascading effect.
!1

The TabContainer component has props to customize it. We've seen so far the main capabilities as:

1. Possibility to change the color, background color, active style and basic style of the header.
2. We have a way to perform lazy loading function between tabs.
3. Change of the animation of the transition time between the tabs.
4. Enabling or disabling a specific tab.
5. Setting the active tab.

`ts
export interface TabContainerProps {
activeIndex?: number; // Set the current active tab, default index 0.
backgroundColor?: string // Set the background color for the tab header
color?: string // Set the color of the active tab.
indicatorStyle?: 'simple' | 'bottomLine' | 'button' // Enable diferent way to present the labels in the header of the tab
onTabChange?: Function, // Callback function activated for each change of the current active tab
lazy?: boolean; // Enables lazy loading, allow to render only the dom the active tab
transitionMs?: number;
borderLine?: boolean; // Enables border-botton in the header of tabs
fontColor?: string; // Useful when using a different background color in the header, and you want to change the font color in it.
}
`

`ts
export interface TabItemProps {
name: string; // The unique identificator of the tab, that it is the label rendered in the header of the component
disabled?: boolean // Allow to disabled the navigation/clicking to TabItem
}
``

$3

$3

#### 1. react-hook-modal

#### 2. react-basic-stepper

#### 3. ngp-image-picker

License

MIT © josealejandro2928