bozazec / swipeable-tabs Goto Github PK

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.

Following Peer Dependencies are required for using this library:

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

npm install @tarragon/swipeable-tabs --save

or

yarn add @tarragon/swipeable-tabs

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

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>

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

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

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

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

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

• React
• TypeScript
• Webpack
• ❤️

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