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)
      defaultLength={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)
      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

prop	required	default	type	description
ascending	no	true	boolean	Defines the order of available values. true could lead to a range like [300, 301, 302, ..., 400], while false would make it [400, 399, 398, ..., 300].
containerHeight	no	80	number	Defines the height of the length picker.
containerStyle	no	undefined	React.CSSProperties	Let's you add additional css style to the main container.
containerWidth	no	160	number	Defines the width of the length picker.
defaultLength	no	350	number	Defines the default value when the length picker is mounted. Make sure it is within the min-max range of the current unit.
entryContainerStyle	no	undefined	React.CSSProperties | ((index: number, currentMetricValue: number, currentImperialValue: number, isActive: boolean) => React.CSSProperties)	Let's you adjust the style of one individual height entry within the list. It can either be a standard css style object, or also a function that returns one. The function itself receives two properties representing the entry's index as well as if it's currently in view, allowing you more styling flexibility.
entryContentStyle	no	undefined	React.CSSProperties | ((index: number, currentMetricValue: number, currentImperialValue: number, isActive: boolean) => React.CSSProperties)	Same as above, but refers to the entry's content, not its container.
entryHeight	no	40	number	Defines the height of one individual list entry.
imperialFormatter	no	(check the source code for seeing the default function)	( isPrimary: boolean, inches: number, feetAndInches: FeetAndInches, index: number ) => string | number | React.ReactNode	Let's you format imperial list entries. The function has access to the following props: isPrimary, indicating if the imperial unit is currently the active one, inches, representing the corresponding length in inches, feetAndInches, and object that separates inches from feet, and index, representing the entry's index within the list.
imperialMax	no	157	number	Defines the max value for the imperial length range.
imperialMin	no	118	number	Defines the min value for the imperial length range.
imperialStep	no	1	number	Defines the step value (interval) for the imperial length range.
metricFormatter	no	(check the source code for seeing the default function)	( isPrimary: boolean, inches: number, feetAndInches: FeetAndInches, index: number ) => string | number | React.ReactNode	Let's you format metric list entries. The function has access to the following props: isPrimary, indicating if the metric unit is currently the active one, centimeters, representing the corresponding length in centimeters and index, representing the entry's index within the list.
metricMax	no	157	number	Defines the max value for the metric length range.
metricMin	no	118	number	Defines the min value for the metric length range.
metricStep	no	1	number	Defines the step value (interval) for the metric length range.
onLengthChange	no	() => {}	(length: number) => void	Defines the callback function when the length is changed via the length picker.
onUnitChange	no	() => {}	(unit: Unit) => void	Defines the callback function when the unit is changed via the length picker. The Unit type can be either "metric" or "imperial".
unit	no	"metric"	Unit	Defines the current unit of the length picker. The Unit type can be either "metric" or "imperial".

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...