# react-cool-tabs

> react-cool-tabs React component

Latest version **1.1.6** (published 2019-02-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-cool-tabs
pnpm add react-cool-tabs
yarn add react-cool-tabs
bun add react-cool-tabs
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.6 |
| Published | 2019-02-11 |
| First published | 2019-02-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 29.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Maintainers | timorss |
| Keywords | react-component |

## Links

- npm: https://www.npmjs.com/package/react-cool-tabs
- Repository: https://github.com/timorss/react-cool-tabs
- Homepage: https://github.com/timorss/react-cool-tabs#readme
- Issues: https://github.com/timorss/react-cool-tabs/issues
- npm.io page: https://npm.io/package/react-cool-tabs

## Recent versions

- 1.1.6 (latest) — 2019-02-11
- 1.1.5 — 2019-02-08
- 1.1.4 — 2019-02-04
- 1.1.3 — 2019-02-04
- 1.1.2 — 2019-02-04
- 1.1.0 — 2019-02-03
- 1.0.9 — 2019-02-03
- 1.0.8 — 2019-02-03
- 1.0.7 — 2019-02-03
- 1.0.6 — 2019-02-03
- 1.0.5 — 2019-02-02
- 1.0.4 — 2019-02-02
- 1.0.3 — 2019-02-02
- 1.0.2 — 2019-02-02
- 1.0.1 — 2019-02-02
- … 1 more at https://npm.io/package/react-cool-tabs/versions

## README

# react-cool-tabs

Very comfortable package to use tabs.<br />
I looked for a tabs package that i can custom each tab and content the way i want.<br />
for example different borderBottom on each tab.<br />
i didn't find so i made this.<br />
Enjoy.<br />

![](1.gif)
![](2.gif)
![](3.gif)

## Installation

     npm i react-cool-tabs --save

## Usage

```jsx
import  React  from  'react';
import CoolTabs from 'react-cool-tabs';

class Content1 extends Component {
  render() {
    return <div style={style}>
      this is Content1
    </div>
  }
}
class Content2 extends Component {
  render() {
    return <div style={style}>
      this is Content2
    </div>
  }
}

export  default  class  Example  extends  React.Component {
render() {
   return (
     <div>
	     <CoolTabs
	       tabKey={'1'}
	       style={{ width:  550, height:  500, background:  'white' }}
	       activeTabStyle={{ background:  'red', color:  'white' }}
	       unActiveTabStyle={{ background:  'green', color:  'black' }}
	       activeLeftTabBorderBottomStyle={{ background:  'blue', height:  4 }}
	       activeRightTabBorderBottomStyle={{ background:  'yellow', height:  4 }}
	       tabsBorderBottomStyle={{ background:  'orange', height:  4 }}
	       leftContentStyle={{ background:  'lightgreen' }}
	       rightContentStyle={{ background:  'lightblue' }}
	       leftTabTitle={'Left title'}
	       rightTabTitle={'Right title'}
	       leftContent={<Content1/>}
	       rightContent={<Content2/>}
	       contentTransitionStyle={'transform 0.6s ease-in'}
	       borderTransitionStyle={'all 0.6s ease-in'}/>
     </div>
);
}}
```

## Props

Some propStyles has also classNames, so you can use them in a css file.
 
|props| type | classNames | Description|
|-----|--|--|--|
|style|object|className|The style of the Container. <br />the default is width: 400, height: 400|
|tabsHeaderStyle|object|tabsHeaderClassName|The style of the tabs part default here is height: 40|
|activeTabStyle|object|activeTabClassName|The active tab style, u can also give style to the title font|
unActiveTabStyle|object|unActiveClassName| The Unactive tab style, u can also give style to the title font
leftTabStyle|object|leftTabClassName| The left tab style only if you want different style for each tab.<br /> **<small>activeTabStyle and unActiveTabStyle is stronger than this!</small>**| 
rightTabStyle|object|rightTabClassName| The right tab style only if you want different style for each tab.<br /> **<small>activeTabStyle and unActiveTabStyle is stronger than this!</small>**| 
leftTabTitleStyle|object|leftTabTitleClassName|The left title style if you want to give each title different style
rightTabTitleStyle|object|rightTabTitleClassName|The right title style if you want to give each title different style
leftTabTitle|string|leftTabTitle|Left title name
rightTabTitle|string|rightTabTitle|Right title name
tabsBorderBottomStyle|object|tabsBorderBottomClassName|the border under the tabs|
activeLeftTabBorderBottomStyle|object|activeLeftTabBorderBottomClassName|border under the **left** tab if active|
activeRightTabBorderBottomStyle|object|activeRightTabBorderBottomClassName|border under the **right** tab if active|
contentContainerStyle|object|contentContainerClassName| Recommended just if you want to make the backgroundColor a gradient on both tabs **content** , else you can use leftContentStyle, and rightContentStyle
leftContentStyle|object|leftContentClassName|The left content style|
rightContentStyle|object|rightContentClassName|the right content style|
leftContent|component/text/img|-|The content you want to have when you on the left tab|
rightContent|component/text/img|-|The content you want to have when you on the right tab|
contentTransitionStyle|string|-|the speed and type of transition.<br />**example:** 'transform 0.6s ease-in' <br />**has to start with the word 'transition'!**|
borderTransitionStyle|string|-|The border transition style.<br /> **example:**  'all 0.6s ease'<br />**has to start with the word 'all'!**|

---
_Source: https://npm.io/package/react-cool-tabs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._