React Tab Scroller

A React version of an MDC Tab Scroller.

Installation

npm install @material/react-tab-scroller

Usage

Styles

with Sass:

import '@material/react-tab-scroller/index.scss';

with CSS:

import '@material/react-tab-scroller/dist/tab-scroller.css';

Javascript Instantiation

import React from 'react';
import TabScroller from '@material/react-tab-scroller';

class MyApp extends React.Component {
  render() {
    return (
      <TabScroller>
        <div className='tab'>Tab 1</div>
        <div className='tab'>Tab 2</div>
        <div className='tab'>Tab 3</div>
      </TabScroller>
    );
  }
}

Props

Prop Name | Type | Description --- | --- | --- alignStart | boolean | If true aligns the initial scroll position to the first tab. alignEnd | boolean | If true aligns the initial scroll position to the last tab. alignCenter | boolean | If true aligns the initial scroll position to the middle tab. className | string | Classes to appear on root element. onWheel | function | Callback triggered on wheel event. onTouchStart | function | Callback triggered on touchstart event. onPointerDown | function | Callback triggered on pointerdown event. onMouseDown | function | Callback triggered on mousedown event. onKeyDown | function | Callback triggered on keydown event. onTransitionEnd | function | Callback triggered on transitionend event.