React hook for managing a custom keypad
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
| Property | Type | Default | Description |
|---|---|---|---|
debug? |
boolean |
false |
Whether debug mode is enabled |
decimals? |
number |
0 |
Number of supported decimal places |
initialValue? |
string | number |
0 |
Initial keypad value (will not update!) |
negative? |
boolean |
false |
Whether negative numbers are supported |
maxDigits? |
number |
Maximum allowed whole digits | |
maxValue? |
number |
Maximum allowed value | |
ref? |
Ref<IKeypadRef> |
Ref to provide access to limited Keypad functions/values | |
removeDecimalOnDelete? |
boolean |
false |
Whether decimal should be removed when deleting last decimal digit |
onChange? |
(value: string, valueString: string, flags: IKeypadFlags): void |
Change handler receiving |
Hook Data
| Property | Type | Description |
|---|---|---|
getValue |
(): number |
Get current keypad value (numeric) |
getValueString |
(): string |
Get current keypad value (string) |
reset |
(): void |
Reset the keypad value |
setValue |
(value: string | number): void |
Set 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.
| Property | Type | Description |
|---|---|---|
getValue |
(): number |
Get current keypad value (numeric) |
getValueString |
(): string |
Get current keypad value (string) |
reset |
(): void |
Reset the keypad value |
setValue |
(value: string | number): void |
Set 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.
| Property | Type | Description |
|---|---|---|
enteredDecimalDigits |
number |
Number of entered decimal digits |
enteredWholeDigits |
number |
Number of entered whole digits |
hasDecimal |
boolean |
Whether keypad string has a decimal entered |
hasMaxDecimalDigits |
boolean |
Whether keypad has reached maximum decimal places |
hasMaxWholeDigits |
boolean |
Whether keypad has reached maximum digits (whole number only) |
hasValue |
boolean |
Whether 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