marschattha-swipeable-tabs v0.1.15

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

<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

<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

Built With

• React
• TypeScript
• Webpack
• ❤️

License

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