@ausbom/time-scrubber

The TimeScrubber component provides a UI for playing back and scrubbing through a number of discrete time steps. Primarily used to scrub through map layers.

Usage no npm install needed!

<script type="module">
  import ausbomTimeScrubber from 'https://cdn.skypack.dev/@ausbom/time-scrubber';
</script>

README

@ausbom/time-scrubber

The TimeScrubber component provides a UI for playing back and scrubbing through a number of discrete time steps. Primarily used to scrub through map layers.

Installation

npm install @ausbom/time-scrubber

Usage

import TimeScrubber from '@ausbom/time-scrubber'
import React from 'react'

<TimeScrubber
  onChange={(timeStep: string) => {
    this.setState({
      activeStep: timeStep,
    })
  }}
  activeStep={this.state.activeStep}
  timeSteps={[
    {
      id: '1',
      displayLabel: '1 hour 15 minutes ago',
    },
    {
      id: '2',
      displayLabel: '1 hour ago',
    },
    {
      id: '3',
      displayLabel: '45 minutes ago',
    }
  ]}
/>