Material-UI Dots

This component gives you animated pagination dots as seen in the Material Design specs and in the quick settings menu of Android N. The dots were extracted from our auto-rotating carousel component.

Installation

npm i --save material-ui-dots

Usage

There is only a single Dots component which is to be used in controlled mode. The following example component will display five dots and select a dot when clicking on it.

import React from 'react'
import Dots from 'material-ui-dots'

class Demo extends React.Component {
  constructor (props) {
    super(props)
    this.state = { index: 0 }
  }

  render () {
    return (
      <Dots
        index={this.state.index}
        count={5}
        onDotClick={(index) => this.setState({ index })}
      />
    )
  }
}

License

The files included in this repository are licensed under the MIT license.