@dinushasilva/react-swipeable-tabs

0.1.7 • Public • Published

react-swipeable-tabs

Installing

$ npm install react-swipeable-tabs --save

Demos

Example

import React from 'react';
import SwipeableTabs from 'react-swipeable-tabs';

export default class TestTabs extends React.Component {
  componentWillMount() {
    this.setState({
      activeItemIndex: 2,
      items: [
        { title: "Item 1" },
        { title: "Item 2" },
        { title: "Item 3" },
        { title: "Item 4" },
        { title: "Item 5" },
        { title: "Item 6" },
        { title: "Item 7" },
        { title: "Item 8" },
        { title: "Item 9" },
        { title: "Item 10" },
        { title: "Item 11" },
        { title: "Item 12" },
      ]
    });
  }

  render() {
    return (
      <SwipeableTabs
        noFirstLeftPadding={false}
        noLastRightPadding={false}
        fitItems={false}
        alignCenter={false}
        borderWidthRatio={1}
        activeItemIndex={this.state.activeItemIndex}
        onItemClick={(item, index) => this.setState({ activeItemIndex: index })}
        items={this.state.items}
        borderPosition="top"
        borderThickness={2}
        borderColor="#4dc4c0"
        activeStyle={{
          color: '#4dc4c0'
        }}
      />
    );  
  }
} 
Property Type Default Description
items* arrayOf (element) Array of tabs to render.
onItemClick* func When an item is clicked, this is called with (item, index).
activeItemIndex number 0 This is only useful if you want to control the active item index from outside.
itemClassName string Item class name.
itemStyle object {} Item style.
activeStyle object {} Active item style.
alignCenter bool true Whether or not to align center if items total width smaller than container width.
fitItems bool false This option will fit all items on desktop
noFirstLeftPadding bool false This prop defines if the first item doesnt have left padding.

We use this to calculate the border position for the first element.
noLastRightPadding bool false This prop defines if the last item doesnt have right padding.

We use this to calculate the border position for the last element.
borderPosition enum ('top', 'bottom') 'bottom' Border position.
borderColor string '#333' Border color.
borderThickness number 2 Border thickness in pixels.
borderWidthRatio number 1 Border width ratio from the tab width.

Setting this to 1 will set border width to exactly the tab width.
safeMargin number 100 This value is used when user tries to drag the tabs far to right or left.

Setting this to 100 for example user will be able to drag the tabs 100px

far to right and left.
initialTranslation number 0 Initial translation. Ignore this.
stiffness number 170 React motion configurations.

More about this here
damping number 26 React motion configurations.

More about this here
resistanceCoeffiecent number 0.5 Drag resistance coeffiecent.

Higher resitance tougher the user can drag the tabs.
gravityAccelarion number 9.8 Gravity acceleration.

Higher resitance tougher the user can drag the tabs.
dragCoefficient number 0.04 Learn more

Contributing

To contribute, follow these steps:

  • Fork this repo.
  • Clone your fork.
  • Run npm install
  • Run npm start
  • Goto localhost:3000
  • Add your patch then push to your fork and submit a pull request
  • NOTE: Don't forget to run npm build before pushing your changes

Credits

Initial version of react-swipeable-tabs developed by bitriddler: https://github.com/bitriddler/react-swipeable-tabs.git

License

MIT

Package Sidebar

Install

npm i @dinushasilva/react-swipeable-tabs

Weekly Downloads

4

Version

0.1.7

License

MIT

Unpacked Size

602 kB

Total Files

14

Last publish

Collaborators

  • dinushasilva