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"; |
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"; |
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.