0.0.5 • Published 6 months ago
react-dms-input v0.0.5
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 --saveDemo
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