Skip to content

Latest commit

 

History

History
268 lines (222 loc) · 6.79 KB

README.md

File metadata and controls

268 lines (222 loc) · 6.79 KB
Raw

Build Status MIT License Contributors LinkedIn

Swipeable Tabs

Easy to incorporate and highly customizable Tabs Component for React, where tabs can be switched by swiping across the screen, as well as the conventional clicking on tab names way. Supports all types of devices.

Getting Started

Prerequisites

Following Peer Dependencies are required for using this library:

  • react: ^16.8.0
  • @emotion/core: ^10.0.17,
  • @emotion/styled: ^10.0.17,

Installation

npm install @tarragon/swipeable-tabs --save

or

yarn add @tarragon/swipeable-tabs

Usage

Examples

Checkout the basic usage here.
Various customisations can also be added to the component like this.

Quick Usage

Make sure to have a state variable to determine the current selected Tab

const [selectedTab, setSelectedTab] = React.useState(0);
const changeTab: (selectedTab: {
  label: string;
  key: string | number;
}) => void = updatedTab => {
  setSelectedTab(updatedTab.label);
};

Import the Tabs component and pass the current selected tab value to it, along with onChange callback. A number of Tab components can be passed as children of the Tabs component, to represent each of the tabs.

<Tabs value={selectedTab} onChange={changeTab}>
  <Tab label="Tab 1" key={0}>
    <div>Tab 1 Content</div>
  </Tab>
  <Tab label="Tab 2" key={1}>
    <div>Tab 2 content</div>
  </Tab>
  <Tab label="Tab 3" key={2}>
    <div>Tab 3 content</div>
  </Tab>
  <Tab label="Tab 4" key={3}>
    <div>Tab 4 content</div>
  </Tab>
</Tabs>

APIs

<Tabs />

Import

import { Tabs } from "@tarragon/swipeable-tabs";

Props

Name Type Default Description
value string - Label of the current selected tab.
onChange function - Tab change handler, return type: void, that receives the changed tab details, { label: string; key: string | number }
styleProps { fontFamily?: string;
barColor?: string;
headerTextColor?: string;
selectedHeaderTextColor?: string;
alignHeader?: "left" | "center" | "right";
showInkBar?: boolean;
inkBarColor?: string;
activeInkBarColor?: string;
size?: "large" | "medium" | "small";
tabPosition?: "top" | "bottom";
justifyTabs?: "start" | "space-evenly";
}		 { fontFamily: "sans-serif",
barColor: "#8c7ae6",
headerTextColor: "#fff",
selectedHeaderTextColor: "#e6d5ec",
alignHeader: "center",
showInkBar: true,
inkBarColor: "white",
activeInkBarColor: "#82589F",
size: "medium",
tabPosition: "top",
justifyTabs: "space-evenly" }		 Design customisations
tabBarCSS string "" Stringified CSS to further customise the tab bar. example, tabBarCSS = `border-color: red 1px solid; color: black`
tabItemCSS string "" Stringified CSS to further customise individual tab item in the tab bar. example, tabItemCSS = `text-align: left`
blacklistedElement { identifierType: "className" | "id" | "nodeName";
identifierName: string; }		 undefined Enables blacklisting certain nodes where swipe action would be disabled. Can be used if a tab content has a horizontal scrolling element.

<Tab />

To be passed as child of Tabs component, where each <Tab/> represents single tab, with its innerHTML as content of the tab

Import

import { Tab } from "@tarragon/swipeable-tabs";

Props

Name Type Default Description
label string - Label of individual tab item.

<SwipeableViews />

A Swipeable views component, that receives an array of elements as views, and enables horizontal swiping between them.

Import

import { SwipeableViews } from "./@tarragon/swipeable-tabs";

Props

Name Type Default Description
views JSX.Element[] - An array of elements, to be treated as views.
selectedView number 0 Index of the view visible by default
onSwipe (selectedTab: number) => void - Callback function to be invoked on swipe between tabs. selectedTab is index of the view currently visible. Should update the selectedView prop.
inkBarRef React.RefObject< HTMLHRElement> - Ref to an HR eleemnt, that can be used as an inkBar to denote position of current visible view
blacklistedElement { identifierType: "className" | "id" | "nodeName";
identifierName: string; }		 undefined Enables blacklisting certain nodes where swipe action would be disabled. Can be used if a tab content has a horizontal scrolling element.

Built With

License

Distributed under the MIT License. See LICENSE for more information.