@atul15r/react-tabs

React Tabs

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

Live Demo

Installation

 # If you use npm:
 npm i @atul15r/react-tabs

 # If you use yarn:
 yarn add @atul15r/react-tabs


 ES6 Usage
 import { Collapsible } from '@atul15r/react-tabs';

 Commonjs Usage
 var Collapsible = require('@atul15r/react-tabs');

Quick Start

<Tabs items={items} />

Usage With Custom Styles

icon component can be HTMLElement (i.e. svg/image/div/section ...etc)/React-Component

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

const tabs = [
  {
    title: "TypeScript",

  {
    title: "JavaScript",

  },
];


const App = () => {
  return (
   <Tabs
 tabs={tabs}
 tabStyle={{
         background: `#fff`,
         font-weight: 500,
         color: "#333"
 }}
/>
  );
};

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)}