React DMS input

React component for Degrees, Minutes and Seconds (DMS) coordinates input. Mainly focussed on the maritime industry.

Installation

yarn add react-dms-input
npm install react-dms-input --save

Demo

https://phalkone.github.io/react-dms-input/

Basic usage

import React, { useState } from 'react'
import DMSInput from 'react-dms-input'
import 'react-dms-input/style.css'

function App() {
  const [value, setValue] = useState(0)

  return (
    <DMSInput
      mode="DMS"
      type="lat" // Required property
      value={value}
      locale={'en-US'}
      fractionDigits={1}
      onChange={setValue}
    />
  )
}

Properties

| Property | Type | Default | Description | | -------------- | ------------------------------------- | ------------- | ------------------------------------------------------------------------------------ | | mode | 'DMS' | 'DM' | 'D' | 'DM' | Display mode of input. | | type | 'lat' | 'long' | | Latitude or longitude input. | | fractionDigits | [0-4] | 1 | Fraction digits of degrees (D mode) or minutes (DM mode) input. Ignored in DMS mode. | | locale | string | (host locale) | Locale of input. Affects the decimal separator of the minutes. | | value | number | | Value in degrees. | | onnChange | (val: number | undefined) => void | | Called when the degrees value changes. | | nextFocus | HTMLInputElement | HTMLSelectElement | | UI element to focus on once the sign once the sign has been entered. | | ref | React.RefObject | | Reference to the input component | | classes | DMSInputClasses | | Custom css classes for all containers | | style | React.CSSProperties | | Inline styles for the root container |

Styling Reference

CSS Class Hierarchy

.DMSInput (root container)
├── .input-wrapper (generic input group)
│   ├── input (number input element)
│   └── span (degree symbol)
├── .degrees-wrapper (specific to degrees)
├── .minutes-wrapper (specific to minutes)
├── .seconds-wrapper (specific to seconds)
└── .sign-input (container for N/S/E/W selector)
    └── select (sign dropdown element)

DMSInputClasses

| Class Name | Location | Contains | | ------------------ | ---------------------------- | --------------------------------------- | | root | Root container | All coordinate inputs and sign selector | | inputWrapper | Input group container | Input field + measurement symbol | | degreesWrapper | Degrees-specific container | Degrees input + ° symbol | | minutesWrapper | Minutes-specific container | Minutes input + ' symbol | | secondsWrapper | Seconds-specific container | Seconds input + " symbol | | signInput | Cardinal direction container | N/S/E/W dropdown selector |

CSS variables

| Variable Name | Default Value | Description | | -------------------------- | ------------- | ------------------------------------- | | border-color | #ccc | Border color for input fields | | focus-background-color | #eef6ff | Border color for focused input fields | | symbol-color | #6c757d | Color for measurement symbols |

License

MIT