react-length-picker 📏

A simple length picker that works with metric and imperial units

Teaser

(YouTube Teaser here)

Live Demo

https://stackblitz.com/edit/react-length-picker-demo

Install

npm install --save react-length-picker

Or if you use Yarn:

yarn add react-length-picker

Usage

import { LengthPicker } from "react-length-picker";

// ...

return (
  <SomeReactComponent>
    <LengthPicker
      unit={"metric"} // set current unit (metric vs. imperial)
      length={350} // set default length
      metricMin={300} // set minimum value for metric scale (in cm)
      metricMax={400} // set maximum value for metric scale (in cm)
      metricStep={1} // set interval/step for metric scale (in cm)
      // hint: you could use the `metricToImperial` helper function to define the following props (or vice versa)
      imperialMin={118} // set minimum value for imperial scale (in inches)
      imperialMax={157} // set maximum value for imperial scale (in inches)
      imperialStep={1} // set interval/step for imperial scale (in inches)
      // ...and many more optional props - see props section below
    />
  </SomeReactComponent>
);

Props

Ideas / Open Tasks

• Add possibility to also override css styling for SecondaryListEntry
• Improve TypeScript (some redundancy in various interfaces, use inheritance etc.)

If you enjoy using this...