Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including @whatoplay/react-tab-scroller with all npm packages installed. Try it out:

var reactTabScroller = require("@whatoplay/react-tab-scroller")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@whatoplay/react-tab-scroller v0.8.0

Material Components React Tab Scroller

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 NameTypeDescription
alignStartbooleanIf true aligns the initial scroll position to the first tab.
alignEndbooleanIf true aligns the initial scroll position to the last tab.
alignCenterbooleanIf true aligns the initial scroll position to the middle tab.
classNamestringClasses to appear on root element.
onWheelfunctionCallback triggered on wheel event.
onTouchStartfunctionCallback triggered on touchstart event.
onPointerDownfunctionCallback triggered on pointerdown event.
onMouseDownfunctionCallback triggered on mousedown event.
onKeyDownfunctionCallback triggered on keydown event.
onTransitionEndfunctionCallback triggered on transitionend event.
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free