react-wunderbar

A react svg component that displays a ruler with major and minor tick marks within a specified range of values. Can show key points of interest as markers and highlight regions of interesting activity on the ruler. Examples

Installation

react-wunderbar can be installed directly through npm:

$ npm install --save react-wunderbar

Usage

import Wunderbar from 'react-wunderbar';

<Wunderbar min={0} max={50} minorTickEvery={1} majorTickEvery={5} currentPoint={5} highlightRegion={[2,4]} interval={15} />

Documentation

react-wunderbar supports changing the range of values, formatting, animating the pointer via react HOC, changing all the colours by supplying new palettes. Full documentation with editable examples and supported properties

Tests

Tests are written in Jest

Roadmap

• Interactive, set value on the ruler via dragging the pointer
• Add events to notify value changes
• Support react-styled components.