Skip to content

phalkone/react-dms-input

Repository files navigation

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