https://github.com/en-atul/react-tabs

react tab navigation
https://github.com/en-atul/react-tabs

tab tabnavigation

Last synced: about 1 year ago
JSON representation

react tab navigation

• Host: GitHub
• URL: https://github.com/en-atul/react-tabs
• Owner: en-atul
• Created: 2022-08-07T20:30:48.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2022-09-12T09:39:01.000Z (almost 4 years ago)
• Last Synced: 2025-03-18T07:29:23.801Z (over 1 year ago)
• Topics: tab, tabnavigation
• Language: TypeScript
• Homepage: https://codesandbox.io/s/atul15r-react-tab-mdnzqn
• Size: 3.77 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
## React Tabs

![Download](https://img.shields.io/npm/dt/@atul15r/react-tabs.svg)

**React-Tabs is an animated tab navigation component which is designed for react

app.**

**[Live Demo](https://codesandbox.io/s/atul15r-react-tabs-mdnzqn)**

![Alt text](visual/react-tabs.gif?raw=true 'React Tabs')

# Installation

```js

 # If you use npm:

 npm i @atul15r/react-tabs

 # If you use yarn:

 yarn add @atul15r/react-tabs

 ES6 Usage

 import { Tabs } from '@atul15r/react-tabs';

 Commonjs Usage

 var Tabs = require('@atul15r/react-tabs');

```

# Quick Start

```js

```

# Usage With Custom Styles

```js

import React from 'react';

import { Tabs } from '@atul15r/react-tabs';

const tabs = [

  {

    title: "TypeScript",

  {

    title: "JavaScript",

  },

];

const App = () => {

  return (

   

  );

};

export default App;

```

# Props

| name            | type     | required | default   | description                                                    |

| --------------- | -------- | -------- | --------- | -------------------------------------------------------------- |

| tabs            | array    | true     | []        | it takes an array of object `{ title: string \| ReactNode }[]` |

| tabsClassName   | string   | false    | undefined | add any custom class you want                                  |

| tabsStyle       | object   | false    | undefined | `wrapperStyle= {{ background:"#ccc", color:"#999", ...etc }}`  |

| tabClassName    | string   | false    | undefined | add any custom class you want                                  |

| tabStyle        | object   | false    | undefined | ` itemStyle= {{ padding:4, }}`                                 |

| borderStyle     | object   | false    | undefined | `borderStyle= {{ background:#6b6b6b, }}`                       |

| borderClassName | string   | false    | undefined | add any custom class you want                                  |

| onChange        | function | false    | undefined | ` onChange={(tabIndex)=>setCurrentTab(tabIndex)}`              |