0.1.0 • Published 3 years ago

@kendallroth/keypad-react v0.1.0

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

keypad-react

React hook for managing keypad state (with decimal support).

Requirements

Note that the Keypad formatting requires Number.toLocaleString(), which may not be available by default in all environments (React Native, etc)!

API

Hook Config

PropertyTypeDefaultDescription
debug?booleanfalseWhether debug mode is enabled
decimals?number0Number of supported decimal places
initialValue?string \| number0Initial keypad value (will not update!)
negative?booleanfalseWhether negative numbers are supported
maxDigits?numberMaximum allowed whole digits
maxValue?numberMaximum allowed value
ref?Ref<IKeypadRef>Ref to provide access to limited Keypad functions/values
removeDecimalOnDelete?booleanfalseWhether decimal should be removed when deleting last decimal digit
onChange?(value: string, valueString: string, flags: IKeypadFlags): voidChange handler receiving

Hook Data

PropertyTypeDescription
getValue(): numberGet current keypad value (numeric)
getValueString(): stringGet current keypad value (string)
reset(): voidReset the keypad value
setValue(value: string \| number): voidSet the keypad value (manual)
onKey(key: Keys)Keypress handler

Hook Ref

The Keypad exposes a ref API to allow parent components to call the provided Keypad API (setting/resetting value, etc).

Note that the ref must be used with forwardRef on the component implementing the hook.

PropertyTypeDescription
getValue(): numberGet current keypad value (numeric)
getValueString(): stringGet current keypad value (string)
reset(): voidReset the keypad value
setValue(value: string \| number): voidSet the keypad value (manual)

Keypad Flags

Keypad flags can optionally be used to set keypad display options. For example, disabling decimal key when the keypad already has a decimal entered, etc.

PropertyTypeDescription
enteredDecimalDigitsnumberNumber of entered decimal digits
enteredWholeDigitsnumberNumber of entered whole digits
hasDecimalbooleanWhether keypad string has a decimal entered
hasMaxDecimalDigitsbooleanWhether keypad has reached maximum decimal places
hasMaxWholeDigitsbooleanWhether keypad has reached maximum digits (whole number only)
hasValuebooleanWhether keypad has a value

Development

# Build for production
npm run build

# Build in development (with watching/reloading)
npm run build:dev

The example project can be used to test while developing the keypad-react package. While the package has already been installed (as file:..), it will need to be linked (npm link ..) to properly receive updates while developing. Use npm run build:dev to run the bundling process with reloading enabled.

NOTE: Occasionally modifying exported package types will apparently not be detected by Rollup, and will not be recompiled. Simply restarting the Rollup watch process is enough to fix this issue.

Tests

Tests should be run during development and before publishing!

npm run test