#StandWithUkraine

Utilities

George Design System package provides several JavaScript utility functions, that we use internally as well.

HINT This page is rather technical and intended for developers.

eventHasKey

EventHasKey is a helper function that takes in an event and an array of keys and checks whether the event was fired by one of those keys.

You may either define your own key codes or use the ones included in the KEY enum.

Loading demo…

formatAmount

This function returns a string representing an amount based on the parameters.

Please use formatAmount only when you need a string value. For rendering purposes always use the Amount component.

Loading demo…

parseAmount

ParseAmount takes a formatted amount string along with options, parses it and returns a string with the unformatted amount in cents.

Please don’t use parseAmount to create an amount input. We have the AmountInput component for that.

Loading demo…

Full stop behaviour

In case neither the decimal separator, nor the thousands separator is set to the full stop (.), parseAmount will parse strings in which the full stop is used in place of the defined separator. So e.g. if the decimal separator is set to comma (,), both 100,00 and 100.00 will be parsed as the same amount.

The intention here is to let users who are accustomed to the english full stop decimal point format use that format in addition to their regional format.

When this behaviour is undesired it can be circumvented by setting useSeparatorsOnly: true in the parseAmount options object.