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